Event

Event

Vocabulary

Webinar, Event

Syntax

This molecule follows the overall form of a hero, but instead of an image it displays information pertaining to the event: calendar icon, webinar/event title, presenter (optional), day, time, and a button to RSVP/register. Its background is a solid color. It's followed by a paragraph of text that explains more about the event and operates as a teaser.

Semantics

This can be used for webinars or in-person events. The main goal is to capture leads.

HTML

<!-- // Begin Card -->
<table cellpadding="0" cellspacing="0" border="0" class="esg-card esg-round" bgcolor="#ffffff" width="100%">
  <!-- // Container Item -->
  <tr>
    <td align="center" class="esg-container-item">

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

        <!-- Webinar Item: Webinar Hero -->
        <tr>
          <td align="center" class="esg-container-inner esg-bg-blue esg-webinar-bg esg-round-t esg-text-color-white esg-text-center esg-p-base">
            <img src="https://s3.amazonaws.com/treehouse-email-images/templates/calendar2x.png" width="55" height="55" alt="Calendar">
            <p class="esg-p esg-text-color-white esg-text-5-xs mktEditable esg-text-center" id="webinar-label" mktoName="Webinar - Label" color="#ffffff">Webinar</p>
            <h2 class="esg-text-color-white esg-m-t-0 mktEditable text-center-xs esg-h2" id="webinar-title" mktoName="Webinar - Title" color="#ffffff">How to Build a Successful and Scalable Training Roadmap</h2>
            <p class="mktEditable esg-text-color-white esg-text-center esg-m-0" id="webinar-time" mktoname="Webinar - Time" color="#ffffff" style="color: #fff !important;"><span class="esg-text-color-white esg-outlook-link" style="color: #fff !important;">Join us Monday, August 28th at Xpm PST</span></p>
          </td>
        </tr>

        <!-- Container Item: Webinar Content -->
        <tr>
          <td class="esg-p-lr-base esg-p-t-base esg-round-b">
            <h3 class="esg-h3 esg-m-t-0 esg-p-b-3 esg-text-color-dark mktEditable" id="webinar-subtitle" mktoName="Webinar - Subtitle">Join Us for this Special Training Event</h3>
            <p class="esg-p esg-m-t-0 esg-m-b-0 esg-text-color-dark mktEditable" id="webinar-description" mktoName="Webinar - Description">Connect with the folks on our Business Team for a special webinar where we'll be discussing specific strategies for building a successful and scalable training roadmap for your organization.</p>
          </td>
        </tr>

        <!-- Container Item: Button -->
        <tr>
          <td class="esg-p-lr-base esg-p-t-6 esg-p-b-base esg-round-b" 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="webinar-button" mktoName="Webinar - Button">
                  <a href="http://blog.teamtreehouse.com/elliott-davidson?cid=6912&utm_medium=email&utm_campaign=blog_newsletter" class="esg-button esg-button-green">
                    <span class="esg-button-text-green esg-button-text">Register for the Webinar</span>
                  </a>
                </td>
              </tr>
            </table>
            <!-- // End Container Button -->

          </td>
        </tr>
        <!-- // End Container Item: Button -->

      </table>
      <!-- // End Container: Webinar -->

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