Broadcast Style Guide

Swatches

fill-dark
fill-light
fill-subtle
fill-primary
fill-success
fill-warning
fill-error

Backgrounds

background-ocean
background-sky
background-metal

Paper

paper-flat
paper
paper-hover
paper-hover
has-border
paper-raised
paper-floating

Shapes

shape-square
medium
small
tiny
icon
micro
shape-square
is-rounded
medium
small
tiny
icon
micro
shape-card
medium
small
tiny
icon
micro
shape-card
is-horizontal
medium
small
tiny
icon
micro
shape-circle
medium
small
tiny
icon
micro

Images

Simply apply .shape classes to images

Alerts

Simply apply .alert class and decorative .alert class.

alert
.alert .alert-error
.alert .alert-warning
.alert .alert-success

Apply .is-small for a more condensed alert.

alert
.alert .is-small .alert-error
.alert .is-small .alert-warning
.alert .is-small .alert-success

Labels

Simply apply .label class and decorative class.

label .is-primary .is-error .is-warning .is-success .is-dark .is-flat

Form

Using flex grids you can create form fields that adjust to any size.

Fields

Textarea

Checkboxes

Radio Buttons

Menus

Buttons

Layout

Flex Grid

Flex grid columns will automatically fill the space of the grid. The col numbers will make the column larger/smaller relative to the sibling columns.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1

Flex Column sizes

Column sizes are availalbe from 1-10 however there is no limit to the number of columns you can put in a row.

col-2
col-1
col-1
col-1
col-2
col-1
col-3
col-1
col-1
col-1

Fixed Column Sizes

Justified Grid l-flex-justify
col-fixed-1
col-fixed-2
col-fixed-3
col-fixed-4
Regular Grid l-flex

Notice columns align to left naturally

col-fixed-1
col-fixed-2
col-fixed-3
col-fixed-4
Wrapping Grid l-flex-wrap
col-fixed-1
col-fixed-2
col-fixed-3
col-fixed-1
col-fixed-1
col-fixed-1
col-fixed-1
col-fixed-1
col-fixed-1
col-fixed-1

Mixed Columns

Notice how flex columns dynamically fill in extra space.

col-fixed-1
col-1
col-fixed-2
col-fixed-3
col-1

Typography

Display

Display 2

Display - Secondary

Display 2 - Secondary

Display - Disabled

Display 2 - Disabled

Display - Accent

Display 2 - Accent

Display - Error

Display 2 - Error

Display - Inverted

Display 2 - Inverted

Headline

Headline 2

Headline - Secondary

Headline 2 - Secondary

Headline - Disabled

Headline 2 - Disabled

Headline - Accent

Headline 2 - Accent

Headline - Error

Headline 2 - Error

Title

Title 2

Title - Secondary

Title 2 - Secondary

Title - Disabled

Title 2 - Disabled

Title - Accent

Title 2 - Accent

Title - Error

Title 2 - Error

Subheader

Subheader 2

Subheader - Secondary/h4>

Subheader 2 - Secondary

Subheader - Disabled

Subheader 2 - Disabled

Subheader - Accent

Subheader 2 - Accent

Subheader - Error

Subheader 2 - Error

Body

Body 2

Body - Secondary

Body 2 - Secondary

Body - Disabled

Body 2 - Disabled

Body - Accent

Body 2 - Accent

Body - Error

Body 2 - Error

caption caption 2 caption - Secondary caption 2 - Secondary caption - Disabled caption 2 - Disabled caption - Accent caption 2 - Accent caption - Error caption 2 - Error
small small 2 small - Secondary small 2 - Secondary small - Disabled small 2 - Disabled small - Accent small 2 - Accent small - Error small 2 - Error

Apply .text-list to an unordered list for formatting

  • Text List Item
  • Text List Item
  • Text List Item
  • Text List Item

Apply .is-unstyled to an unordered list for no formatting

  • Unstyled List Item
  • Unstyled List Item
  • Unstyled List Item
  • Unstyled List Item

Apply .feature-list for feature like formatting.

  • 10 Some Feature
  • 10 Some Feature
  • 10 Some Feature
  • done Some Feature .has-icon