Please find the Figma Email UI Kit here.
Hero
Heros are best used to grab the reader's attention and clearly present the most desired action.
They sit above the main bulk of copy and can work to summarise at a glance the information stated below it.
They work well with an image or illustration and is a great place to situate a primary button.
Hero-alertmessage-default
Hero-alertmessage-mobile
Hero-simple-default
Hero-simple-mobile
Hero-withprimarybutton-2-default
Hero-withprimarybutton-2-mobile
Hero-withprimarybutton-default
Hero-withprimarybutton-mobile
Content Hero Banner
ContentHeroBanner-default
ContentHeroBanner-mobile
Short content with icon
To present simple, quick pieces of information – such as a single product feature – short content with an icon is a great a design asset to use.
They can be stacked to show multiple features, each using a different line of copy and icon.
ShortContentwithIcon-1-default
ShortContentwithIcon-1-mobile
ShortContentwithIcon-2-default
ShortContentwithIcon-2-mobile
ShortContentwithIcon-3-default
ShortContentwithIcon-3-mobile
Single Column Layout
1collayout-1-default
1collayout-1-mobile
1collayout-2-default
1collayout-2-mobile
1collayout-3-default
1collayout-3-mobile
1collayout-4-default
1collayout-4-mobile
1collayout-5-default
1collayout-5-mobile
Double column layout
2ColLayout-1-default
2ColLayout-1-mobile
2ColLayout-2-default
2ColLayout-2-mobile
2ColLayout-3-default
2ColLayout-3-mobile
Promo card
Promo cards display information and an action related to a single subject, such as an offer or a specific product.
PromoCard-single-default
PromoCard-single-mobile
PromoCard-2coloumn-default
PromoCard-2coloumn-mobile
Event signpost
An event signpost showcases key event information in an easily readable and digestible way.
Eventsignpost-default
Eventsignpost-mobile
Event details
An event details pattern highlights the date, time and hosts of an event.
Eventdetails-default
Eventdetails-mobile
App info
The app info pattern draws out a benefit of the Sage app to encourage the reader to use it.
appinfo-default
appinfo-mobile
E-book download
The e-book download pattern highlights a downloadable e-book for the reader and entices them to download it.
Ebook-default
Ebook-mobile
Keydates
The key dates pattern highlights important dates for the reader, such as deadlines and tax year ends.
Keydates-default
Keydates-mobile
Latest news
The latest news pattern highlights key content for the reader to click through to.
This content is most often topical articles addressing recent events that are of relevance to Sage’s customers.
Latestnews-default
Latestnews-mobile
About author/speaker
An about author/speaker pattern highlights one or more key speakers at an event.
aboutauthor-multi-default
aboutauthor-multi-mobile
aboutauthor-single-default
aboutauthor-single-mobile
Testimonial
Testimonials use quotes from Sage customers to help sell the Sage brand or new products to prospects or existing customers.
Testimonials are composed of three key elements; a picture of the person quoted, their name and job title, and the quotation itself.
Testimonial-default
Testimonial-mobile
Footer
Footers balance out a page, clearly showing its end while displaying brand and legal elements, as well as social links if appropriate.
The footer tails the page, incorporating the Sage logo and links to legal information.
Footer-default
Footer-mobile
