Callout
Vocabulary
Call Out
Syntax
The call out molecule is a section of content that either spans the full width of the white container or sits inline. It can include a range of content types: illustration, headline, paragraph text, and a button. The call out molecule is a colored section of content that either spans the full width of the white container or sits inline. It can include a range of content types: full-width photo, full-width or inline illustration, headline, paragraph text, and a button.
Semantics
It's intended to stand out from the rest of the email. It may be a promotion, an announcement, a recommendation, etc. The main thing to note is that it's an important piece of information, but it isn't the main goal of an email. These are patterns of various intensity that call out different information. It's intended to stand out from the rest of the email. It may be a promotion, an announcement, a recommendation, etc. The main thing to note is that it's an important piece of information, but it isn't the main goal of an email.
|
HTML
<!-- // Begin Card -->
<table cellpadding="0" cellspacing="0" border="0" class="esg-card esg-round" bgcolor="#ffffff" width="100%">
<!-- // Card Item: Call Out -->
<tr>
<td class="esg-p-base">
<!-- // Call Out -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="esg-bg-gray-lighter esg-round esg-p-3">
<p class="esg-p esg-bold m-0-xs esg-text-color-dark mktEditable" id="callout-headline" mktoName="Callout - Headline">Interested in learning more?</p>
<p class="esg-p esg-text-color-dark mktEditable" id="callout-description" mktoName="Callout - Description">Reply to this email to reach your Customer Success Manager to discuss best practices and create learning paths for each team with <a href="http://go.teamtreehouse.com/c000300K0usW01kPy00H200" target="_blank" class="esg-link esg-link-blue">Custom Tracks!</a></p>
</td>
</tr>
</table>
<!-- // End Call Out -->
</td>
</tr>
</table>