diff --git a/claat/parser/gdoc/parse.go b/claat/parser/gdoc/parse.go
index fa69f05de..0c6db6426 100644
--- a/claat/parser/gdoc/parse.go
+++ b/claat/parser/gdoc/parse.go
@@ -380,10 +380,10 @@ func metaTable(ds *docState) {
 		switch strings.ToLower(stringifyNode(tr.FirstChild, true)) {
 		case "id", "url":
 			ds.clab.ID = s
-		case "author":
-			ds.clab.Authors = s
-		case "authors":
+		case "author", "authors":
 			ds.clab.Authors = s
+		case "badge", "badge id":
+			ds.clab.BadgeID = s
 		case "summary":
 			ds.clab.Summary = s
 		case "category", "categories":
diff --git a/claat/parser/md/parse.go b/claat/parser/md/parse.go
index 338d9c568..2524f4742 100644
--- a/claat/parser/md/parse.go
+++ b/claat/parser/md/parse.go
@@ -42,6 +42,7 @@ import (
 // Metadata constants for the YAML header
 const (
 	MetaAuthors          = "authors"
+	MetaBadgeID          = "badge id"
 	MetaSummary          = "summary"
 	MetaID               = "id"
 	MetaCategories       = "categories"
@@ -356,6 +357,9 @@ func addMetadataToCodelab(m map[string]string, c *types.Codelab) error {
 		case MetaAuthors:
 			// Directly assign the summary to the codelab field.
 			c.Authors = v
+		case MetaBadgeID:
+			// Directly assign the codelab ID to the codelab field.
+			c.BadgeID = v
 		case MetaSummary:
 			// Directly assign the summary to the codelab field.
 			c.Summary = v
diff --git a/claat/render/template-devsite.html b/claat/render/template-devsite.html
index 3d3bf7bdf..105a6f27a 100644
--- a/claat/render/template-devsite.html
+++ b/claat/render/template-devsite.html
@@ -56,7 +56,8 @@
           {{if eq $i 0}}
             <google-codelab-about codelab-title="{{$.Meta.Title}}"
                                   {{if $.Updated}}last-updated="{{$.Updated}}"{{end}}
-                                  {{if $.Meta.Authors}}authors="{{$.Meta.Authors}}"{{end}}>
+                                  {{if $.Meta.Authors}}authors="{{$.Meta.Authors}}"{{end}}
+                                  {{if $.Meta.BadgeID}}badge-id="{{$.Meta.BadgeID}}"{{end}}>
             </google-codelab-about>
           {{end}}
           {{.Content | renderHTML $.Env}}
diff --git a/claat/render/tmpldata.go b/claat/render/tmpldata.go
index 155c4528e..211c72960 100644
--- a/claat/render/tmpldata.go
+++ b/claat/render/tmpldata.go
@@ -481,26 +481,35 @@ var tmpldata = map[string]*template{
 			0x6f,0x72,0x73,0x3d,0x22,0x7b,0x7b,0x24,0x2e,0x4d,
 			0x65,0x74,0x61,0x2e,0x41,0x75,0x74,0x68,0x6f,0x72,
 			0x73,0x7d,0x7d,0x22,0x7b,0x7b,0x65,0x6e,0x64,0x7d,
-			0x7d,0x3e,0xa,0x20,0x20,0x20,0x20,0x20,0x20,0x20,
-			0x20,0x20,0x20,0x20,0x20,0x3c,0x2f,0x67,0x6f,0x6f,
-			0x67,0x6c,0x65,0x2d,0x63,0x6f,0x64,0x65,0x6c,0x61,
-			0x62,0x2d,0x61,0x62,0x6f,0x75,0x74,0x3e,0xa,0x20,
-			0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x7b,
-			0x7b,0x65,0x6e,0x64,0x7d,0x7d,0xa,0x20,0x20,0x20,
-			0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x7b,0x7b,0x2e,
-			0x43,0x6f,0x6e,0x74,0x65,0x6e,0x74,0x20,0x7c,0x20,
-			0x72,0x65,0x6e,0x64,0x65,0x72,0x48,0x54,0x4d,0x4c,
-			0x20,0x24,0x2e,0x45,0x6e,0x76,0x7d,0x7d,0xa,0x20,
+			0x7d,0xa,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,
+			0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,
+			0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,
+			0x20,0x20,0x20,0x20,0x20,0x20,0x7b,0x7b,0x69,0x66,
+			0x20,0x24,0x2e,0x4d,0x65,0x74,0x61,0x2e,0x42,0x61,
+			0x64,0x67,0x65,0x49,0x44,0x7d,0x7d,0x62,0x61,0x64,
+			0x67,0x65,0x2d,0x69,0x64,0x3d,0x22,0x7b,0x7b,0x24,
+			0x2e,0x4d,0x65,0x74,0x61,0x2e,0x42,0x61,0x64,0x67,
+			0x65,0x49,0x44,0x7d,0x7d,0x22,0x7b,0x7b,0x65,0x6e,
+			0x64,0x7d,0x7d,0x3e,0xa,0x20,0x20,0x20,0x20,0x20,
 			0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x3c,0x2f,0x67,
 			0x6f,0x6f,0x67,0x6c,0x65,0x2d,0x63,0x6f,0x64,0x65,
-			0x6c,0x61,0x62,0x2d,0x73,0x74,0x65,0x70,0x3e,0xa,
-			0x20,0x20,0x20,0x20,0x20,0x20,0x7b,0x7b,0x65,0x6e,
-			0x64,0x7d,0x7d,0x7b,0x7b,0x65,0x6e,0x64,0x7d,0x7d,
-			0xa,0x20,0x20,0x20,0x20,0x3c,0x2f,0x67,0x6f,0x6f,
-			0x67,0x6c,0x65,0x2d,0x63,0x6f,0x64,0x65,0x6c,0x61,
-			0x62,0x3e,0xa,0x20,0x20,0x3c,0x2f,0x62,0x6f,0x64,
-			0x79,0x3e,0xa,0x3c,0x2f,0x68,0x74,0x6d,0x6c,0x3e,
-			0xa,
+			0x6c,0x61,0x62,0x2d,0x61,0x62,0x6f,0x75,0x74,0x3e,
+			0xa,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,
+			0x20,0x7b,0x7b,0x65,0x6e,0x64,0x7d,0x7d,0xa,0x20,
+			0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x7b,
+			0x7b,0x2e,0x43,0x6f,0x6e,0x74,0x65,0x6e,0x74,0x20,
+			0x7c,0x20,0x72,0x65,0x6e,0x64,0x65,0x72,0x48,0x54,
+			0x4d,0x4c,0x20,0x24,0x2e,0x45,0x6e,0x76,0x7d,0x7d,
+			0xa,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x20,0x3c,
+			0x2f,0x67,0x6f,0x6f,0x67,0x6c,0x65,0x2d,0x63,0x6f,
+			0x64,0x65,0x6c,0x61,0x62,0x2d,0x73,0x74,0x65,0x70,
+			0x3e,0xa,0x20,0x20,0x20,0x20,0x20,0x20,0x7b,0x7b,
+			0x65,0x6e,0x64,0x7d,0x7d,0x7b,0x7b,0x65,0x6e,0x64,
+			0x7d,0x7d,0xa,0x20,0x20,0x20,0x20,0x3c,0x2f,0x67,
+			0x6f,0x6f,0x67,0x6c,0x65,0x2d,0x63,0x6f,0x64,0x65,
+			0x6c,0x61,0x62,0x3e,0xa,0x20,0x20,0x3c,0x2f,0x62,
+			0x6f,0x64,0x79,0x3e,0xa,0x3c,0x2f,0x68,0x74,0x6d,
+			0x6c,0x3e,0xa,
 		},
 	},
 	"md": &template{
diff --git a/claat/types/meta.go b/claat/types/meta.go
index e300e308a..c7215f8eb 100644
--- a/claat/types/meta.go
+++ b/claat/types/meta.go
@@ -29,6 +29,7 @@ type Meta struct {
 	Duration   int           `json:"duration"`           // Codelab duration in minutes
 	Title      string        `json:"title"`              // Codelab title
 	Authors    string        `json:"authors,omitempty"`  // Arbitrary authorship text
+	BadgeID    string        `json:"badge_id,omitempty"` // ID of the BAdge to grant on codelab completion on devsite
 	Summary    string        `json:"summary"`            // Short summary
 	Theme      string        `json:"theme"`              // Usually first item of Categories
 	Status     *LegacyStatus `json:"status"`             // Draft, Published, Hidden, etc.
diff --git a/codelab-elements/google-codelab-about/google_codelab_about.js b/codelab-elements/google-codelab-about/google_codelab_about.js
index 07bd452d7..557f8b533 100644
--- a/codelab-elements/google-codelab-about/google_codelab_about.js
+++ b/codelab-elements/google-codelab-about/google_codelab_about.js
@@ -27,6 +27,9 @@ const LAST_UPDATED_ATTR = 'last-updated';
 /** @const {string} */
 const AUTHORS_ATTR = 'authors';
 
+/** @const {string} */
+const BADGE_ID_ATTR = 'badge-id';
+
 /** @const {string} */
 const CODELAB_TITLE_ATTR = 'codelab-title';
 
@@ -52,6 +55,9 @@ class CodelabAbout extends HTMLElement {
 
     /** @private {?string} */
     this.lastUpdated_ = null;
+
+    /** @private {?string} */
+    this.badgeId_ = null;
   }
 
   /**
@@ -97,6 +103,11 @@ class CodelabAbout extends HTMLElement {
           this.codelabTitle_ = this.getAttribute(CODELAB_TITLE_ATTR);
         }
         break;
+      case BADGE_ID_ATTR:
+        if (this.hasAttribute(BADGE_ID_ATTR)) {
+          this.badgeId_ = this.getAttribute(BADGE_ID_ATTR);
+        }
+        break;
     }
 
     this.setupDom_();
@@ -126,6 +137,7 @@ class CodelabAbout extends HTMLElement {
       lastUpdated: CodelabAbout.formatDate_(this.lastUpdated_),
       authors: this.authors_,
       codelabTitle: this.codelabTitle_.split(':').join(':||').split('||'),
+      badgeId: this.badgeId_,
     });
 
     this.hasSetup_ = true;
diff --git a/codelab-elements/google-codelab-about/google_codelab_about.scss b/codelab-elements/google-codelab-about/google_codelab_about.scss
index 8031ab885..a2dde4936 100644
--- a/codelab-elements/google-codelab-about/google_codelab_about.scss
+++ b/codelab-elements/google-codelab-about/google_codelab_about.scss
@@ -51,7 +51,7 @@ google-codelab-about .about-card h2 {
   font-size: 28px;
 }
 
-google-codelab-about .about-card > *:not(:first-child):not(:last-child) {
+google-codelab-about .about-card > *:not(:first-child) {
   padding-top: 30px;
 }
 
diff --git a/codelab-elements/google-codelab-about/google_codelab_about.soy b/codelab-elements/google-codelab-about/google_codelab_about.soy
index b9afde707..1d41003b2 100644
--- a/codelab-elements/google-codelab-about/google_codelab_about.soy
+++ b/codelab-elements/google-codelab-about/google_codelab_about.soy
@@ -24,6 +24,7 @@
   {@param? codelabTitle: list<string>}
   {@param? lastUpdated: string}
   {@param? authors: string}
+  {@param? badgeId: string}
 
   {if $codelabTitle}
     <div class="codelab-title">
@@ -56,6 +57,8 @@
       {/if}
     </div>
 
-    <devsite-badge-to-earn></devsite-badge-to-earn>
+    {if $badgeId}
+      <devsite-badge-to-earn badge-id="$badgeId"></devsite-badge-to-earn>
+    {/if}
   </div>
 {/template}