Learning Content List

Learning Content List

Vocabulary

Learning Content List

Syntax

This molecule contains a series of rows, each featuring a type of library content. Each type has a label, a name, and a corresponding icon. Rows are separated by light grey dividers.

Semantics

The learning content list features courses, workshops, and episodes from The Treehouse Show. It is a recurring email that is sent weekly.

HTML

TO DO

Course List for B2B

Vocabulary

Course List for B2B

Syntax

This molecule closely follows the Learning Content Announcement layout, yet includes topic names and an extra paragraph.

Semantics

The intended audience is b2b admins. The alterations to this help to connect the course content to job role.

HTML

<!-- Container Item -->
<tr>
  <td class="esg-container-item">

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

      <!-- // Course List Item: Heading -->
      <tr>
        <td class="esg-p-t-base esg-p-lr-base esg-p-b-3">
          <h2 class="esg-h2 esg-m-0 esg-text-color-dark mktEditable" id="courses-headline" mktoName="Callout - Headline">New Courses</h2>
        </td>
      </tr>

      <!-- // Course List Item: Course (repeatable) -->
      <tr>
        <td class="esg-p-lr-base esg-p-b-base mktoContainer" id="course-container">

          <!-- Course Content -->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule" id="course1" mktoname="Course 1">
            <tr>
              <td colspan="2" class="esg-p-b-3 esg-border-t mktEditable" id="course1-headline" mktoName="Course 1 - Description">
                <h4 class="esg-h4 esg-m-t-6 esg-m-b-3 esg-text-color-dark">Cross-train your Marketers and Designers</h4>
                <p class="esg-p esg-text-color-dark">Looking to start with the fundamentals of coding? In <a href="http://go.teamtreehouse.com/ZWs0001Ak0000000J30uPK2" target="_blank" class="esg-link esg-link-blue">HTML Basics</a>, Guil Hernandez teaches the skills needed in order to rely less on your developers for building landing pages and HTML emails.</p>
              </td>
            </tr>

            <tr>
              <td class="esg-align-middle esg-bg-gray-lighter esg-p-4 esg-round-l mktEditable" height="50" id="course1-course" mktoName="Course 1 - Course">
                <a href="http://go.teamtreehouse.com/ZWs0001Ak0000000J30uPK2" class="esg-m-0 esg-link esg-link-gray esg-text-color-light esg-text-6 esg-block regular">HTML Course</a>
                <a href="http://go.teamtreehouse.com/ZWs0001Ak0000000J30uPK2" class="esg-p-t-2 esg-link esg-link-gray esg-text-color-dark esg-block" target="_blank">HTML Basics</a>
              </td>
              <td class="esg-text-right esg-bg-gray-lighter esg-p-4 esg-round-r" height="50">
                  <a href="http://go.teamtreehouse.com/ZWs0001Ak0000000J30uPK2" target="_blank" class="esg-block"><img width="25" height="25" border="0" src="https://s3.amazonaws.com/treehouse-email-images/course-retirement/course%402x.png" class="content-announcement-icon-wrap-img" alt="Course"></a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- // End Container Item -->