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