Cosmo

An ode to Metro

Inspired by Bootswatch Cosmo, © Thomas Park

Top Bar

Buttons

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading with muted text


Leading nullam ullamcorper nisl vel elit ornare, et porttitor urna sollicitudin.

Example body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat et sapien vel condimentum.

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.

function ThisIsCode();

  1. List item
  2. List item
    • Nested list item
  3. List item

Statistics

256

This is a quote:

Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov
Definition
Donec non tristique est, a faucibus est.
List
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • List item
  • List item
    • Nested list item
  • List item

This text is left-aligned. Fusce sit amet purus non tellus hendrerit congue eget sit amet nisl.

This text is right-aligned. Fusce sit amet purus non tellus hendrerit congue eget sit amet nisl.

This text is center-aligned. Fusce sit amet purus non tellus hendrerit congue eget sit amet nisl.

This text is justified. Fusce sit amet purus non tellus hendrerit congue eget sit amet nisl.

Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Forms

Legend

Your password must have at least 10 characters, a number, and an Emoji.






Check these out

Choose Your Favorite


$

Abide Demo

Here's how you use this input field!

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Check these out
Choose Your Favorite - not required, you can leave this one blank.
Choose Your Favorite, and this is required, so you have to pick one.

Accordian Menu


Pagination


Breadcrumbs

Containers

Accordian


Tabs

One

Check me out! I'm a super cool Tab panel with text content!

Two
Three

Off-Canvas

Card

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.


Media Object

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Callout

This is a primary callout

It has an easy to override visual style, and is appropriately subdued.

Take this.
This is a secondary callout
Take this.
This is a success callout

Take this.
This is a warning callout
Take this.
This is a normal callout
This is an alert callout
Take this.
This is a large callout

It has an easy to override visual style, and is appropriately subdued.

Take this.

Media

Badge

1 2 S A W B
 

Label

Primary Secondary Success Alert Warning Label
 

Slider

Progress Bar

10%

25%

40%

55%

70%

85%


Tooltip

The scarabaeus hung.

Responsive Embed

Thumbnail


Switch

Reveal (Modal)

Click me for a tiny modal

Oh! I'm so tiny!

Click me for a small modal

I may be small, but I've got a big heart!

Click me for a large modal

I'm big, like bear!

This is a full page reveal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor, lectus a vulputate sollicitudin, purus sapien mollis enim, et posuere ligula orci eget eros. Pellentesque in viverra tortor. Sed sagittis fringilla tortor ut efficitur. Sed pharetra porttitor enim, vel pulvinar turpis suscipit ac. Sed condimentum, lectus et elementum tincidunt, nisi justo vulputate justo, id suscipit tellus orci sit amet metus. Mauris suscipit neque eget lorem fringilla luctus. Ut rhoncus ac lorem nec ultricies. Nam rhoncus auctor diam a consectetur. Aenean faucibus auctor arcu quis dignissim. Quisque a nunc nisl. Nunc ultrices vestibulum odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Quisque elit massa, fringilla at nisi vel, ullamcorper dictum lectus. Nam molestie, orci sit amet volutpat ultrices, turpis erat consequat justo, sit amet lacinia risus libero nec ante.


Key: ª = Active state; ° = Disabled state; ² = Not in F6, borrowed from B4