Style Guide

An overview of Timber's modular interface components.

What’s a Rich Text element?

Pro tip
Create the RTE in a "style guide" page where you can style it without the need to connect and disconnect it each time you want to make a change to the design of the RTE elements. Just set the same class on the RTE in the Style guide as you have set on your Collection page. Now, whenever you need to update the style of elements within the RTE of a Collection page, go to the Style guide page and style those elements in the corresponding RTE.

The rich text element

The rich text element

The rich text element

The rich text element

The rich text element
The rich text element

What’s a Rich Text element?

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

h1

h2

h3

h4

h5
h6
  • jojo o oi
  • ojojo
  1. oo o
  2. ojo jo o

Colors

Primaries, feedback colors and gray shades

Primary
Primary 2
Primary 3
Success
Warning
Error
Snow
Dark Gray
Dim Gray
Light Gray
Feint Gray
White
Typography

Headings, body text, links and other common text elements.

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
Heading six - small
Large Text
Large Link
Body Text
Body Link
Small Text
Small Link
Tiny Text
Tiny Link
small uppercase text
Icons Social

Dark and light icons for commonly used social networks

Icons Interface

Common interface iconography

Buttons

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Forms

Size and state variations for text inputs

Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textarea
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Here is some input hint text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Success Message
This is some text inside of a div block.
Badges

Combine with other components to display metadata

Badge Text
Colors
Primary
Primary 2
Primary 3
Success
Warning
Error
Avatars

Represent users and customers throughout the interface

Sizes
Status Indicator
Group
With Name
Andy Sanjit
Cards

Structural component for displaying boxed content

Basic Variations
Default Style

Some card text

Text Link
Offset Style

Some card text

Text Link
Dark Style

Some card text

Text Link
Footer
Default Style

Some card text

Text Link
Image Cards
Default Style

Some card text

Text Link
Pills

A small encapsulated element based on the card. Displays small media items that generally live in a group.

Content Variations
"Here's a quote"
User Message
Calendar
Icon
Here's a handy multi-purpose notice. Link here
Notice
Color Variations
Standard
Primary
Primary 2
Primary 3
Success
Warning
Error
On Dark
Shadows

Preset shadow utilities to imply varying levels of depth

Small
Medium
Large
Expandable

Toggle element based on the Card for displaying discrete portions of information

Icon Arrangements

Preset arrangements for icons with associated content

Vertical

Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

Horizontal

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

Large Circled

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

  • Icon list item
  • Another item in the list
  • Have a great day

What’s a Rich Text element?

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.

Static and dynamic content editing

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!

How to customize formatting for each 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.

  • lmlml
  • ,;;l
  1. lmlmlml
  2. ,;,;;,;

What’s a Rich Text element?

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.

h1 Static and dynamic content editing

h2 Static and dynamic content editing

h3 Static and dynamic content editing

h4 Static and dynamic content editing

h5 Static and dynamic content editing
h6 Static and dynamic content editing

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!

How to customize formatting for each 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.

  • lkllmll
  • ommm o o
  • ij joijo
  1. oko p p
  2. pkpkp
  3. ok p
  4. ojo
kjuhguhuhu