Contents

Typography (Iceberg)

Documentation

Older versions

Iceberg-Styles v1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph (p)

Base 1
Base 2
Base 3
Description
btn-text-sm
btn-text-md
btn-text-lg

This is a lead paragraph. It stands out from regular paragraphs.

This line rendered as bold text.

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they're displayed inline.

Images

Documentation
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

Tables

Documentation

Regular

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Example expanded row content
3 Oscar Racso @fat

Grid

# First Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
Example expanded row content
3 Oscar Racso @fat

Table with footer

Figures

Documentation
Placeholder 400x300
A caption for the above image.

Forms

Overview

Documentation
We'll never share your email with anyone else.
Checkboxes
Radio buttons
Switch

Disabled forms

Documentation
Disabled radios buttons

Sizing

Documentation

Input group

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

Validation

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Components

Accordion (Iceberg)

Documentation

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts (Iceberg)

Documentation
Lorem ipsum dolor sit amet (alert-danger)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies gravida nunc, urna tristique massa adipiscing mauris cursus quam.

Bold header

Lorem ipsum dolor sit amet (alert-danger)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies gravida nunc, urna tristique massa adipiscing mauris cursus quam.

Center with only alert-body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies gravida nunc, urna tristique massa adipiscing mauris cursus quam.

Remove close button

Center with only alert-body, and setting max-width to 300px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies gravida nunc, urna tristique massa adipiscing mauris cursus quam.

Remove close button and icon

Center with only alert-header and alert-body, and setting max-width to 300px

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies gravida nunc, urna tristique massa adipiscing mauris cursus quam.

Remove icon

Center with only alert-header and alert-body, and setting max-width to 300px

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ultricies gravida nunc, urna tristique massa adipiscing mauris cursus quam.

Badge (Iceberg)

Documentation
6
Primary
Takes more space than it's parent
6
Secondary
6
Dark
6
Success
1%
6
Warning
6
Danger
2%
2%
6
Deleted
6
Primary
6
Secondary
6
Dark
6
Success
1%
6
Warning
6
Danger
2%
6
Deleted

Default

Primary Secondary Success Danger Warning Dark

Default outline

Primary outline Secondary outline Success outline Danger outline Warning outline Dark outline

Buttons - All (Iceberg)

Documentation

Primary, outline and link (with active, disable)

Secondary, outline and link (with active, disable)

Dark, outline and link (with active, disable)

Success, outline and link (with active, disable)

Danger, outline and link (with active, disable)

Warning, outline and link (with active, disable)

Light, outline and link (with active, disable)

Button - Naming

Documentation

Buttons - Icon right (Iceberg)

Documentation

Primary (with active, disable)

Primary small (sm)

Primary medium (md)

Primary large (lg)

Outline-Primary (with active, disable)

Primary small (sm)

Primary medium (md)

Primary large (lg)

Button - Sizes

Documentation

Button - Loading sizes

Documentation
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

List group

Documentation
  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

List group with multi row content

  • Subheading
    Content for list item
    14
  • Subheading
    Content for list item
    14
  • Subheading
    Content for list item
    14

List group with horizontal multi row content

  • Subheading
    Content for list item
    14
  • Subheading
    Content for list item
    14
  • Subheading
    Content for list item
    14

List group with no border

  • Subheading
    Content for list item
  • Subheading
    Content for list item
  • Subheading
    Content for list item

Popovers

Documentation

Toasts

Documentation

Tooltips

Documentation