cosmos.css is in beta

Headings

Cosmos is a small, accessible, mobile-first css framework

Cosmos is a small, accessible, mobile-first css framework

Cosmos is a small, accessible, mobile-first css framework

Cosmos is a small, accessible, mobile-first css framework

Cosmos is a small, accessible, mobile-first css framework

Alerts

The default alert is a div with a black border. You can add colors by using any of the .bg- colors.

Default alert, no background color.

Alert with bg class .bg-soft-red

You can remove any border-radius using .is-box, as well as lighten the text color with .color-light

Alert with bg class .bg-green.is-box.color-white

Alerts can also be used as a navigation call out using .alert--header. This removes the margin and border-radius.

Header alert using class .alert.alert--header.bg-pink.text-center.color-light

These can also be used as a cookie bar using .is-fixed-btm.

Cookie bar example

Flexbox based grid

.row.is-25

.column
.bg-light-gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.column
.bg-light-gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.column
.bg-light-gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.column
.bg-light-gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.row.is-50

.column
.bg-light-gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.column
.bg-light-gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.row

.column
.bg-light-gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons

There are three sizes for regular, box, and link buttons.

Button Colors

Add any of the bg-color classes to update the button color.

Badges

badge badge is-bold

Forms - default

Forms - stacked

Forms - floating label

Radio Buttons

There are a few radio button styles. Default, custom, and custom level AAA for accessibility.

Default Radio Buttons

Custom Radio Buttons

Custom Radio Buttons - WCAG Level AAA

Checkbox

Like the radio button, there are three types of checkboxes

Default Checkbox

Custom Radio Buttons

Custom Radio Buttons - WCAG Level AAA