Hero

Vocabulary

Announcement, Hero, Featured

Syntax

The announcement section appears at the top of the email. If an image is included, it's full bleed within the card (the image is full width and the top part of the image touches the grey background). It includes a <h1> heading which can be a greeting or a title for the announcement. Below that, a paragraph and a button often follows. The announcement / hero molecule has a full width image that spans the left, right, and top sides of the white container. It's followed by a title, paragraph(s) of text, and a button.

Semantics

The announcement is the most important part of the email. It's the most prominent and relays the most important information to the user. This is used to make announcements or to emphasize one piece chunk of information. If additional molecules are needed, add them as separate cards.

Get 25% Off this Month

Have you used all your training budget for 2017? Take advantage of those remaining dollars and give the gift of technology skill development to your team with a Treehouse Business plan.

Get Started

HTML

<!-- // Begin Wrapper -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#edeff0" class="esg-wrapper esg-bg-gray-light">
  <!-- // Container Item -->
  <tr>
    <td align="center" class="esg-container-item">

      <!-- // Begin Card -->
      <table cellpadding="0" cellspacing="0" border="0" class="esg-card esg-round" bgcolor="#ffffff" width="100%">

        <!-- // Card Item: Hero -->
        <tr>
          <td class="esg-text-center" align="center">
            <img src="https://s3.amazonaws.com/treehouse-email-images/templates/office-inside1-1200w.png" width="600" class="esg-round-t esg-image-full">
          </td>
        </tr>

        <!-- // Card Item: Heading -->
        <tr>
          <td class="esg-p-t-base esg-p-lr-base esg-p-b-3">
            <h2 class="esg-h2 esg-m-t-0 esg-text-color-dark">
              Get 25% Off this Month
            </h2>
          </td>
        </tr>

        <!-- // Card Item: Body -->
        <tr>
          <td class="esg-p-lr-base">
            <p class="esg-p esg-text-color-dark esg-p-b-3">Have you used all your training budget for 2017? Take advantage of those remaining dollars and give the gift of technology skill development to your team with a Treehouse Business plan.</p>
          </td>
        </tr>

        <!-- // Card Item: Button -->
        <tr>
          <td class="esg-p-lr-base esg-p-b-base esg-p-t-6" align="center">

            <!-- // Container Button -->
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
              <tr>
                <td class="esg-button-container esg-button-container-green">
                  <a href="http://go.teamtreehouse.com/p0000K01xP000GsWku00023" class="esg-button esg-button-green">
                    <span class="esg-button-text-green esg-button-text">Get Started</span>
                  </a>
                </td>
              </tr>
            </table>
            <!-- // End Container Button -->

          </td>
        </tr>
      </table>
      <!-- // End Container Item -->
    </td>
  </tr>
</table>
<!-- // End Wrapper -->