Bent Liquid Style Guide

Version 1.1

Typography

HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading Classes

D2

D1

H1

H2

H3

H4

H5

Global Typography Classes

All Paragraph (HTML Tag)A 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.

All Links

Block Quote

No bullet list
No bullet list

No bullet list
No bullet list

No bullet list
No bullet list
No bullet list

Text Sizes

A 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 Weights

Weight 900

Weight 800

Weight 700

Weight 600

Weight 500

Weight 400

Weight 300

Weight 200

Weight 100

Text Styles

Italicize

Strikethrough

Caps

Muted

Inline Text

Two Lines

Three Lines

Text Colors

Text Color Black

Text Color Secondary

Text Color White

*Add any additional colors here and name them by their color name (i.e Tangerine = Text Color Tangerine)

Text Alignment

TAL

TAC

TAR

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

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 a link inside of a rich text

List item
List item
List item

List item
List item
List item

Caption goes here

Colors

Background Color

BG Black

BG White

BG Whitesmoke

BG Primary

BG Secondary

*Add any additional colors here and name them by their color name (i.e Tangerine = BG Tangerine)

Spacing

Margin (Bottom Only)

Margin None

Margin Tiny

Margin XXS

Margin XS

Margin S

Margin M

Margin L

Margin XL

Margin XXL

Margin H

Margin XH

Margin XXH

Padding (Sections)

Padding XXS

Padding XS

Padding S

Section

Padding L

Padding XL

No Bottom Padding

No Top Padding

No Padding

Layout

Widths + Containers

Full Width

Full Width Tablet

Full Width Landscape

Full Width Portrait

Container XXS

Container XS

Container S

Container M

Container L

Container XL

Grid

3 Col

4 Col

12 Col

Gap L

Gap S

Button Grid

Black Button BOB

Arrow Link

UI Elements

Buttons

Button Button Button Button

Form Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Tabs

Icons

Icon XXS

Icon XS

Icon S

Icon M

Icon L

Icon XL

Icon XXS Cover

Icon XS Cover

Icon S Cover

Icon M Cover

Icon L Cover

Icon XL Cover

Images

Image Wrapper 1:1

Image Wrapper 4:3

Image Wrapper 3:2

Image Wrapper 16:9

Other Classes

Responsiveness

Hide - hide on all devices

Hide Tablet - hide starting from tablet resolution

Hide Landscape - hide starting from mobile landscape resolution

Hide Portrait - hide starting from mobile portrait resolution

Show - display on all devices

Show Tablet - display starting from tablet resolution

Show Landscape - display starting from mobile landscape resolution

Show Portrait - display starting from mobile portrait resolution

DB Tablet - display block (DB) starting from tablet resolution

DB Landscape - display block (DB) starting from landscape resolution

DB Portrait - display block (DB) starting from portrait resolution

TAC Tablet - aligns text to center on tablet

TAC Landscape - aligns text to center on landscape

TAC Portrait - aligns text to center on portrait

TAL Tablet - aligns text to left on tablet

TAL Landscape - aligns text to left on landscape

TAL Portrait - aligns text to left on portrait

VFC Tablet - display vertical flex center on tablet

VFC Landscape - display vertical flex center on landscape

VFC Portrait - display vertical flex center on portrait

Flex Alignment

Flex Left - display flex and align left

Flex Right - display flex and align right

Flex Center - display flex and align center

VFC - display flex and vertically align center

Space Between - display flex and align with space between

VSB - display flex and vertically align with space between

Utility

Z-1 - bring an element closer on the z-index, sets z-index to 1

Z-2 - bring an element closer on the z-index, sets z-index to 2

Center - sets margin left and right to auto, centers an element inside its parent div

Relative - Sets element to position: relative

Layer - sets absolute position with 0% on all sides - add this class to a div to make it expand the entire size of the parent element (parent must be set to position: relative)

Clickable Off - sets pointer-events to none, prevents all click and hover interaction with an element

Overflow Hidden - sets overflow to hidden

Overflow Scroll - sets overflow to scroll

Overflow Auto - sets overflow to auto

Current Year - wrap xxxx in a span to show the current year (often used in footers so that we don't have to update this manually)