Showcase a feature of your product or work
A feature section is an elegant way to showcase a particular feature or product.
Sartre Email comes with several feature sections:
- Feature Product
- Feature Columns
- Feature Stats
- Content Left/Right (+Boxed)
- Feature Text With Button
3-column section with an image in the middle and text rows on the sides. Great for showcasing app features.
Two rows with two columns each. Columns have a centered image at the top, followed by text. On mobile, the columns go full width and stack.
Two half columns, with centered text and big headlines. Great for displaying a set of features.
Two columns, one with a header, text and a link, the other with an image that sticks to the edge of the email container. They stack on mobile, and the one with the image on the right uses the awesome reverse stack techinque from our framework, for consistent hierarchy.
Content Left/Right Boxed
Similar to the above, but with container gutters so that the image doesn't stick to the edge.
Feature Text With Button
One column, full width text, followed by a call to action button. Works well with HEROs.
Buttons & Links
Links and buttons can be customised with inline CSS. Checkout the button component in our email framework.
Simply change the
width="". For retina images, you can keep the
width="" defined by the template, and use an image that is double the width and height of the placeholder image, so that it looks sharp on mobile.
Top & Bottom Spacing
line-height: value on the
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
For spacing on mobile, we generally use the
py-sm-8 class, that sets the spacer to be 16px high. You can change it to one of the other mobile spacing classes in Acorn. Learn more about spacers in Acorn.