Display

properties

Class

Class Attribute
display--none display: none
display--block display: block
display--inline-block display: inline-block
display--inline display: inline
display--flex display: flex
display--inline-flex display: inline-flex

responsive

Our responsive classes take a mobile-first approach by either showing or hiding elements at specified viewports. The classes are broken down by using show or hide and applying a viewport suffix such as :tablet or :desktop.

For example, if you wanted to start displaying an element at the laptop screen size, you would add hide show:laptop. The hide class adds display: none which affects all screen sizes. Whereas the show:laptop class adds display: block at the respected media query. On the flip side, if you wanted to hide an element at the laptop resolution, you owuld simply add hide:laptop. It might help to think of these classes from the “mobile-first” approach.

Class

Class Result
show-print

Show on printed media.

hide-print

Hide on printed media.

show

Show at all screen sizes.

show:tablet

Show at our tablet breakpoint and up.

show:lg-tablet

Show at our large tablet breakpoint and up.

show:laptop

Show Show at our laptop breakpoint and up.

show:desktop

Show at our desktop breakpoint and up.

hide

Hide on all screen sizes.

hide:tablet

Hide on our tablet breakpoint and up.

hide:lg-tablet

Hide on our large tablet breakpoint and up.

hide:laptop

Hide on our laptop breakpoint and up.

hide:desktop

Hide on our desktop breakpoint and up.