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. |