Design

Buttons

Buttons

Button Outline

Buttons Sizes

Buttons Group

Progress Bar

Striped

Alerts

Badge

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Cards

Photo by Vincent Giersch

Card title

This is a simple Card example.

This is some text within a card body.
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Typography

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

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

Quote

“I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. ”

– Noaa

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat.

Display

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6


Text

Muted Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers…

Primary Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers…

Info Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers…

Success Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers…

Warning Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers…

Danger Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers…

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Images

img-thumbnail

Photo by Nikita Tikhomirov

rounded-circle

Photo by おにぎり

rounded

Photo by Christine Sandu

img

Photo by Catrin Johnson

Navbar

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

Carousel

Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse a lacus est. Etiam diam metus, lobortis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse a lacus est. Etiam diam metus, lobortis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus.