Component Reference Guide

General styles and element reference

This is where "the_content()" appears. This section should only be used on basic pages. For most pages, use the Text Component.

Below this, the global Station Finder and Contact Us bars are displayed. On mobile, the Contact Us bar loses the headline and is stuck to the bottom of the screen.

Text Component

This is standard text paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nobis, repellat ex aspernatur perferendis sequi dolorem maiores accusamus fuga! Labore sequi, adipisci at! Enim, ipsam. Blanditiis ullam consequuntur, pariatur odit. Nostrum modi, commodi aspernatur aut obcaecati dignissimos. Corrupti accusantium commodi eum inventore vitae error, voluptatem nulla quaerat nisi sed vero distinctio tempore suscipit. Animi laudantium sint, non repellendus ea reiciendis! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat convallis euismod. Quisque in euismod enim. Vivamus suscipit mattis est, ac pellentesque nisi aliquam ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean magna mi, faucibus sed dolor eget, rhoncus placerat elit. Donec quis mauris sem.

This paragraph displays text with bold, italic, and link styles.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

This is a CTA component

Tab Heading, h3

WYSIWYG text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image position left, hidden on mobile

CTA

Tab Heading, h3

WYSIWYG text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

No image selected

CTA

Tab Heading, h3

WYSIWYG text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image position right, shown on mobile

CTA

Cards Component

You man have a minimum of one card, maximum of four.

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Card Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Two Column Component

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Image Position Right, Shown on Mobile

Learn More

Two Column Component

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Image Position Left, Shown on Mobile

Learn More

Two Column Component, Image hidden on mobile

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Image Position Right, Hidden on Mobile

Learn More

List Item Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

List Item Headline

Text explaining the item lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Content CTA

Mobil Station

Largest retail and diesel network.

Enjoy national coverage with the largest retail and diesel network. Accepted at over 2,000 Esso and Mobil stations across Canada.

Find a station near you

Esso station

Questions about the card programs?

We’re happy to help. Call our customer service line 24/7 at 1-888-330-2419