Styling Classes

Styling a Component

Timber comes with a range of styling classes that can be used for components to quickly change their appearance depending on the section in which they appear. The extent to which they can be customized using these styling classes depends on their structural complexity. For the more complex compoents it is adviced to use CSS to overwrite base classes.

The component editor below suggests what styling classes work best with what component and gives the corresponding HTML that can be copied and pasted into your project.

Example

Sample Title

avatar

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs

A Small Title

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.

  • Sed ut perspiciatis
  • Lorem ipsum dolor
  • Accusantium
  • Ratione voluptatem
  • Sed quia non
  • Neque porro quisquam
  1. Sed ut perspiciatis
  2. Lorem ipsum dolor
  3. Accusantium
  4. Ratione voluptatem
  5. Sed quia non
  6. Neque porro quisquam
  • Sed ut perspiciatis
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
      • Accusantium
      • Ratione voluptatem
  • Sed quia non
  • Neque porro quisquam
This is a label
  • Panel 1 Title
    Panel 1 Content

    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.

  • Panel 2 Title
    Panel 2 Content

    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.

  • Panel 3 Title
    Panel 3 Content

    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.

Tab 1 Content

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.

Tab 2 Content

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.

Tab 3 Content

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.

This is a box component
This is a dismissable box component
50%

Rollover with Button

Rollover with Icon

Socialize with us

Linked Rollover

Employee Date of Birth Job Title Hobby
John Jun 21, 1975 Engineer Hiking
Ally Aug 02, 1980 Doctor Biking
Frank Fev 03, 1986 Teacher Swimming
Jane Nov 25, 1970 Lawyer Parachuting

Free

$ 0 /month

  • 10GB Disk Space
  • 5 Email Addresses
  • 3 Subdomains
  • 1 MySQL Databases

Starter

$ 9.99 /month

  • 20GB Disk Space
  • 10 Email Addresses
  • 6 Subdomains
  • 2 MySQL Databases
Theme Mountain

Current Version