Responsive Component Rules

	Mobile (<768px)	Desktop (≥768px)	Responsive
`Breadcrumbs`	Hidden	Visible	Yes
`Buttons`	Visible	Visible	Yes
`Cards`	Visible	Visible	Yes
`Label-Value`	Visible	Visible	Yes
`More/Less`	Visible	Visible	Yes
`Star Rating`	Visible	Visible	Yes
`List`	Visible	Visible	Visible
`Icon Best of Weddings`	Visible	Visible	Visible
`Input`	Visible	Visible	Visible
`Collapsible`	Visible	Visible	Visible
`Toggle Button`	Visible	Visible	Visible
`Typography`	Visible	Visible	Visible
`Label/Value`	Visible	Visible	Visible
`Form Label`	Visible	Visible	Visible
`Radio`	Visible	Visible	Visible
`Checkbox`	Visible	Visible	Visible
`.component-name`	Visible	Visible	Visible

CSS Animations

bounceIn

Use the .bounceIn class to apply this animation to an element.

<div class="bounceIn">
  ... inner content ...
</div>

fadeIn

Use the .fadeIn class to apply this animation to an element.

<div class="fadeIn">
  ... inner content ...
</div>

CSS helper classes

Visibility helpers

Overflow

Use .hide-overflow on a .container to apply overflow: hidden in both directions.

Touchscreens

On touchscreen devices, the .visible-touch and .hidden-touch classes are available for moving elements around.

Sticky elements

Use .sticky to make an element fixed on the screen. The .sticky-top class will make the element animate in from the top of the screen and the .sticky-bottom class will make it animate in from the bottom of the screen.

Login state

.visible-logged-in hides something unless a user is logged in. No javascript necessary!

.hidden-logged-in hides something when a user is logged in. No javascript necessary!

Ellipsis

.ellipsis-1-lines, .ellipsis-2-lines, .ellipsis-3-lines, .ellipsis-4-lines, .ellipsis-5-lines