add beta tag option to callouts.

richbachman · richbachman · commit a84bbe40df96 · 2019-04-22T16:05:56.000-06:00
diff --git a/src/constants/homeCallouts.js b/src/constants/homeCallouts.js
@@ -2,24 +2,28 @@ const HOME_CALLOUTS = [
   {
     BADGE: 'marketing',
     TITLE: 'Marketing Campaigns',
+    TAG: '',
     COPY: 'Use the SendGrid UI to add contacts, create segments, create and send campaigns, and view your stats.',
     LINK: '/ui/sending-email/how-to-send-email-with-marketing-campaigns/',
   },
   {
     BADGE: 'marketing',
     TITLE: 'Ads',
+    TAG: 'Beta',
     COPY: 'Learn how to use SendGrid’s ad builder to build and launch an attractive display ad campaign quickly.',
     LINK: '/ads/getting-started-with-ads/',
   },
   {
     BADGE: 'development',
     TITLE: 'API',
+    TAG: '',
     COPY: 'Use the SendGrid v3 REST API to build and send email.',
     LINK: '/for-developers/sending-email/api-getting-started/',
   },
   {
     BADGE: 'development',
     TITLE: 'SMTP',
+    TAG: '',
     COPY: 'Use the SendGrid SMTP API to build and send email.',
     LINK: '/for-developers/sending-email/getting-started-smtp/',
   },
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -35,7 +35,10 @@ class Index extends React.Component {
           <div className="home-callout__badge">
             {card.BADGE}
           </div>
-          <h3 className="card__title is-size-h2 m-bottom-2">{card.TITLE}</h3>
+          <h3 className="card__title is-size-h2 m-bottom-2">
+            {card.TITLE}
+            {(card.TAG.length > 0 ? (<span className="tag--beta">{card.TAG}</span>) : '')}
+          </h3>
           <div className="is-p">{card.COPY}</div>
           <Link to={card.LINK} className="btn btn-primary center">Get Started</Link>
         </div>
diff --git a/src/pages/index.scss b/src/pages/index.scss
@@ -139,6 +139,12 @@ $card-gutter: 40px;
   @media (max-width: $width-small) {
     grid-template-columns: 1fr;
   }
+
+  .tag--beta {
+    line-height: 1;
+    margin-left: $scaledown-2;
+    vertical-align: middle;
+  }
 }
 
 .col-home-callout {

Original file line number	Diff line number	Diff line change
`@@ -139,6 +139,12 @@ $card-gutter: 40px;`
`139`	`139`	`@media (max-width: $width-small) {`
`140`	`140`	`grid-template-columns: 1fr;`
`141`	`141`	`}`
	`142`	`+`
	`143`	`+ .tag--beta {`
	`144`	`+ line-height: 1;`
	`145`	`+ margin-left: $scaledown-2;`
	`146`	`+ vertical-align: middle;`
	`147`	`+ }`
`142`	`148`	`}`
`143`	`149`
`144`	`150`	`.col-home-callout {`