Intro Sections

Intro Sections

Intro sections are simple but useful content areas with call to action, that can be used to highlight a product, or describe something in detail. They go great at the near-top of an email (after a Hero), but can be used anywhere you need them.

There are 3 types of Intro sections:

  • Basic with Button
  • With Content Left/Right
  • With Stats — two column, centered text, with big headlines

Basic with Button

One column, full width text, followed by a button component to be used as a call to action.

Example

Intro basic

With Content Left/Right

Two half columns, one with text and a link, the other with an image.
They stack on mobile, and the one with the image on the right uses the awesome mobile reordering techinque from our framework.

Example

Intro with content left

With Stats

Also two half columns, but with centered text and big headlines. Great for announcing things.

Example

Intro with stats

Customisation

You can easily change the looks, by changing text, spacing, and button styles.

  • Text and links can be changed with inline CSS, for the image simply change the src and the dimension settings inline.
  • For button customisation examples, check the Button framework docs.
  • Top/bottom inner spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the spacer <td>