Been There Done That

Style guide

Global Swatches

Elements

This is Title One

NB - called Big Header in Figma. Rarely used.

This is Title 2.5

NB - only used in the Home Intro

This is Title Two

NB - called Header Text in Figma. Used for page headings and H2s.

This is Title Three

NB - called Medium Text in Figma. Used for H3s e.g. post titles.

This is Title Four

NB - called Subhead 20 in Figma. Used for subheads.
This is Title Five
Not in use
This is Title Six
Not in use
Body
xxx
text-size-s
xxx
text-size-l
xxx
text-size-xl
NB - called Medium Text in Figma
text-paragraph
xxx
text-color-white
text-color-turquoise

pointer-none....This is a global class which removes pointer events using custom CSS in the site settings custom code area. Publish and view on the live site to see. If this page is set to draft, set to live, then publish to see.

custom css

pointer-auto....This is a global class which adds pointer events using custom CSS in the site settings custom code area. Publish and view on the live site to see. If this page is set to draft, set to live, then publish to see.

custom css

Line clamp 1....This is a global class for text truncation using custom CSS in the site settings custom code area. Publish and view on the live site to see. If this page is set to draft, set to live, then publish to see.

attribute

Line clamp 2....This is a global class for text truncation using custom CSS in the site settings custom code area. Publish and view on the live site to see. If this page is set to draft, set to live, then publish to see.

attribute

Line clamp 3....This is a global class for text truncation using custom CSS in the site settings custom code area. Publish and view on the live site to see. If this page is set to draft, set to live, then publish to see.

attribute

Line clamp 4....This is a global class for text truncation using custom CSS in the site settings custom code area. Publish and view on the live site to see. If this page is set to draft, set to live, then publish to see.

attribute

Line clamp 5....This is a global class for text truncation using custom CSS in the site settings custom code area. Publish and view on the live site to see. If this page is set to draft, set to live, then publish to see.

attribute

Misc.

This element couldn‘t be rendered because it may not support child elements, or it has an invalid tag.
dom element
container
display-none

HTML

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5 (unstyled)
Heading 6 (unstyled)

Paragraph - lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text block
Block Quote
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item

Rich Text

This is heading one in rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is heading two in rich text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is heading three in rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is heading four in rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is heading five in rich text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is heading six in rich text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Image Caption Here.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Nam molestie, tortor in fringilla cursus, felis justo semper felis, ac auctor tortor erat sit amet magna. Phasellus viverra sem eget consequat elementum. Integer sit amet tincidunt augue. Mauris fermentum nulla leo, ut sagittis justo scelerisque quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at vestibulum risus, eu bibendum velit. Curabitur vestibulum turpis ac lectus rutrum, et placerat enim tincidunt. Praesent libero nisl, suscipit sed mauris non, condimentum posuere velit.

Fusce ornare dui eget rhoncus facilisis. Sed vitae mauris condimentum, maximus eros eget, egestas lorem. Ut a pharetra ante. Quisque eleifend metus in ante scelerisque.

Eget venenatis libero blandit. Maecenas id libero ac nisl consequat scelerisque ut id leo. Donec finibus dolor id nibh porta, non euismod quam efficitur. Donec fringilla arcu vitae porta congue.