Style

Following style guide from: https://tuuli.bironthemes.com/style/

Colors

Info

Success

Warning

Danger

Primary

Dark

Light

Black

White


Headings

All HTML headings, <h1> through <h6>, are available.

Heading 2 example

Heading 3 example

Heading 4 example

Heading 5 example
Heading 6 example

List Types

Ordered List

An unordered list starts with the <ol> tag. Each list item starts with the <li>tag. The list items will be marked with numbers by default:

  1. List Item 1
  2. List Item 2
  3. Nested list item A
  4. Nested list item B
  5. List Item 3

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li>tag. The list items will be marked with bullets by default:

  • List Item a
  • List Item b
  • Nested list item 1
  • Nested list item 2
  • Double Nested item 1
  • Double Nested item 2
  • List Item 3

Blockquotes

For quoting blocks of content from another source within your document.
Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes

Alternative blockquote style:

Success is not final, failure is not fatal: it is the courage to continue that counts.

Buttons

Colors

The button is available in all the different colors defined by the $colors Sass map.

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>
<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
</div>

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

Each color now comes in its light version. Simply append the modifier is-light to the color modifier to apply the light version of the button.

<div class="buttons">
  <button class="button is-primary is-light">Primary</button>
  <button class="button is-link is-light">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-light">Info</button>
  <button class="button is-success is-light">Success</button>
  <button class="button is-warning is-light">Warning</button>
  <button class="button is-danger is-light">Danger</button>
</div>

Sizes


Bookmark Cards

Callout Cards

💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards
💡
Highlight some important information with callout cards

Toggle Cards

Want some collapsible content?

You can use toggle cards to add collapsible content, which for example can be used for an FAQ section.

Video Cards

0:00
/
Normal-width Video
0:00
/
Wide-width Video
0:00
/
Full-width Video

Audio Cards

File Cards

Product Cards

Header Cards

Heading S

Dark background. With button.

Button

Heading M

Light background. With button.

Button

Heading L

Brand background. With button.

Button

Images

Normal-width Image
Wide-width Image
Full-width Image

Embeds

More Elements

Notifications

Tables