Tangram Library Style Guide

Tangram Version 1.0 - Client-First Version 2.0

Typography

Global headings - H1 to H6

HTML tags define default Heading styles.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Override Heading Styles

Heading classes when typography style doesn't match the default HTML tag.

.heading-style-h1

heading-style-h1

.heading-style-h2

heading-style-h2

.heading-style-h3

heading-style-h3

.heading-style-h3

heading-style-h4

.heading-style-h5

heading-style-h5

.heading-style-h6

heading-style-h6

Other HTML tags

HTML tags define default text styles.

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.

Links

Text Link

Block Quote

Block Quote

Text sizes

Text sizes classes when typography size doesn't match the default HTML tag.

.text-size-xlarge

This is some text inside of a div block.

.text-size-large

This is some text inside of a div block.

.text-size-medium

This is some text inside of a div block.

.text-size-small

This is some text inside of a div block.

.text-size-tiny

This is some text inside of a div block.

Text weights

Text weight classes when typography weight doesn't match the default HTML tag.

.text-weight-bold

This is some text inside of a div block.

.text-weight-semibold

This is some text inside of a div block.

.text-weight-medium

This is some text inside of a div block.

.text-weight-normal

This is some text inside of a div block.

.text-weight-light

This is some text inside of a div block.

.text-weight-xlight

This is some text inside of a div block.

.text-weight-thin

This is some text inside of a div block.

Text styles

Text style classes when typography style doesn't match the default HTML tag.

.text-style-link

.text-style-italic

This is some text inside of a div block.

.text-style-strikethrough

This is some text inside of a div block.

.text-style-allcaps

This is some text inside of a div block.

.text-style-muted

.text-style-subheading

This is some text inside of a div block.

.text-style-quote

Block Quote

.text-style-nowrap

.text-style-2lines

.text-style-3lines

Text colors

Manage recurring text colors.

.text-color-white

This is some text inside of a div block.

.text-color-secondary

This is some text inside of a div block.

.text-color-accent

This is some text inside of a div block.

Text alignment

Text alignment classes when typography alignment doesn't match the default HTML tag.

.text-align-left

This is some text inside of a div block.

.text-align-center

This is some text inside of a div block.

.text-align-right

This is some text inside of a div block.

Rich text styling

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading6

‍

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.

Link in rich text

List Item 1
List Item 2
List Item 3

Ordered List Item 1
Ordered List Item 2
Ordered List Item 3

‍

Colors

Color pallete

Manage recurring colors as global classes. Rename [is-1] [is-2]... classes to represent your color classes.

#333333

#f5f5f5

#ffffff

Text colors

#333333

text-color-black

#8f8f8f

text-color-grey

#ffffff

text-color-white

Background colors

.background-color-black

.background-color-grey

.background-color-white

UI Elements

Buttons (light)

.button

Button Text

.button

.is-small

Button Text

.button

.is-secondary

Button Text

.button

.is-secondary

.is-small

Button Text

.button

.is-link

Button Text

Buttons (dark)

.button

.is-alternate

Button Text

.button

.is-small

.is-alternate

Button Text

.button

.is-secondary

.is-alternate

Button Text

.button

.is-secondary

.is-small

.is-alternate

Button Text

.button

.is-link

.is-alternate

Button Text

Form elements

.form_component

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons

Icon sizes

.icon-height-xxsmall

.icon-height-xsmall

.icon-height-small

.icon-height-medium

.icon-height-large

.icon-height-xlarge

.icon-height-custom1

.icon-1x1-xxsmall

.icon-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

.icon-1x1-custom1

Widths

Containers

Defined and flexible container widths we can use on all or most pages.

.container-large

.container-medium

.container-small

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

.max-width-xxsmall

.max-width-xsmall

.max-width-small

.max-width-medium

.max-width-large

.max-width-xlarge

.max-width-xxlarge

Spacings

Padding directions

Use in combination with padding size classes
e.g. [padding-vertical][padding-xxlarge]

.padding-bottom

.padding-top

.padding-vertical

.padding-horizontal

.padding-left

.padding-right

Padding sizes

.padding-0

.padding-tiny

.padding-xxsmall

.padding-xsmall

.padding-small

.padding-medium

.padding-large

.padding-xlarge

.padding-xxlarge

.padding-huge

Section padding

.padding-section-small

.padding-section-medium

.padding-section-large

Margin Directions

Use in combination with margin size classes
e.g. [margin-vertical][margin-xxlarge]

.margin-bottom

.margin-top

.margin-vertical

.margin-horizontal

.margin-left

.margin-right

Margin Sizes

.margin-0

.margin-tiny

.margin-xxsmall

.margin-xsmall

.margin-small

.margin-medium

.margin-large

.margin-xlarge

.margin-xxlarge

.margin-huge