Article

Vocabulary

Article

Syntax

The article molecule is a standalone card (that is, cards can be added below it, but it isn't physically attached to any other piece of content). In consists of an image that represents the gist of the article, an attribution (if required), category (if applicable), a title, a paragraph which functions as a teaser, and a button to view the full article.

Semantics

This is for featured articles which are the main story of the email. Use it when the email's primary intention is get the viewer to read the article.

Custom Tracks & Departments: Working Together in Harmony

Do you have multiple teams in your account? If so, we'd highly recommend taking advantage of our Departments Feature, which has several benefits that will save you time and make your account more organized:

Account Management: Appoint one or multiple (there's no limit!) Department Admins to track progress and oversee their specific teams, taking the onus off of you to manage each person
Customize Tracks: Allow for those Department Admins to request and assign Custom Tracks that meet the needs of their members
Create Groups: Segment your members to easily track the most active teams in the Department Leaderboard

View Your Department Dashboard

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 mktoImg esg-image-full" id="featured-img" mktoName="Featured - Image" alt="Team Working Together">
          </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 mktEditable" id="featured-headline" mktoName="Featured - Headline">
              Custom Tracks &amp; Departments: Working Together in Harmony
            </h2>
          </td>
        </tr>

        <!-- // Card Item: Body -->
        <tr>
          <td class="esg-p-lr-base">
            <p class="esg-p mktEditable esg-text-color-dark esg-p-b-3" id="featured-paragraph" mktoName="Featured - Paragraph">Do you have multiple teams in your account? If so, we'd highly recommend taking advantage of our <a href="http://go.teamtreehouse.com/JW3uK00C1P0st200k000000" target="_blank" class="esg-link esg-link-blue">Departments Feature</a>, which has several benefits that will save you time and make your account more organized:</p>
            <ul class="esg-ul esg-p esg-m-0 mktEditable" id="featured-list" mktoName="Featured - List">
              <li class="esg-text-color-dark esg-p-b-2"><span class="esg-bold">Account Management</span>: Appoint one or multiple (there's no limit!) Department Admins to <a href="http://go.teamtreehouse.com/p0000K01uP000DsWku00023" target="_blank" class="esg-link esg-link-blue">track progress</a> and oversee their specific teams, taking the onus off of you to manage each person</li>
              <li class="esg-text-color-dark esg-p-b-2"><span class="esg-bold">Customize Tracks</span>: Allow for those Department Admins to <a href="http://go.teamtreehouse.com/iv2K0sW10Eu00k000003P00" target="_blank" class="esg-link esg-link-blue">request and assign Custom Tracks</a> that meet the needs of their members</li>
              <li class="esg-text-color-dark"><span class="esg-bold">Create Groups</span>: Segment your members to easily track the most active teams in the <a href="http://go.teamtreehouse.com/b0000kWu2KF0P01w030000s" target="_blank" class="esg-link esg-link-blue">Department Leaderboard</a></li>
            </ul>
          </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 mktEditable" id="featured-button" mktoName="Featured - Button">
                  <a href="http://go.teamtreehouse.com/p0000K01xP000GsWku00023" class="esg-button esg-button-green">
                    <span class="esg-button-text-green esg-button-text">View Your Department Dashboard</span>
                  </a>
                </td>
              </tr>
            </table>
            <!-- // End Container Button -->

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