Panels

This is the panels module. A panel is a container intended to be placed on top of a pages' background. The panels for xs and sm sizes are styled like the old mobile panels (or boxes)

Standard panel

The standard panel has a white background and a slight box shadow.It can be modified by being compact and/or rounded. On sizes xs and sm, the panel loses its border and box shadow, and gains a 3px thick bottom border instead. Also, on sizes xs and sm, the padding is reduced to 8px.

Toggle source (Jade)
+simple-panel().panel-break
	div The standard panel has 24px (adjusted for rem) padding and margin bottom.
	div.lg-panel-wide This will stretch to the edge of the panels on LG
	div.sm-panel-wide This will stretch to the edge of the panels on SM
	div.xs-panel-wide This will stretch to the edge of the panels on XS

+simple-panel()
	div The standard panel has no margin bottom.

Medium padded panel

The medium padded panel has half the padding on the standard panel, on all sizes.

Toggle source (Jade)
+simple-panel().is-pad-m
	div The medium padded panel has half the padding of the standard panel.
	div.lg-panel-wide This will stretch to the edge of the panels on LG
	div.sm-panel-wide This will stretch to the edge of the panels on SM
	div.xs-panel-wide This will stretch to the edge of the panels on XS

Small padded panel

The small padded panel has half the padding on the standard panel, on all sizes.

Toggle source (Jade)
+simple-panel().is-pad-s
	span The small padded panel has a third of the padding of the standard panel.

panel without padding

The panel can also be created without padding

Toggle source (Jade)
+simple-panel().no-pad
	span To create a panel with no padding, use the no-pad class.

Rounded panel

Toggle source (Jade)
+simple-panel().is-rounded.is-pad-m
	span The rounded panel has rounded corners and can be used with size modifying classes.

Transparent panel

Toggle source (Jade)
+simple-panel().no-pad
	p This text is inside the non-padded panel

	+simple-panel().is-transparent
		span the transparent panel has no background, borders, box-shadow or border radius. The purpose of this panel is to provide the standard paddings of the panel without the other styling. In this example, the shadow and background color is rendered by one panel with no padding, and the text is inside a transparent panel with padding.

	p And we're back outside of the transparent panel.

Header

An optional add-on to a standard panel that should be placed at the top of the block inside the panel. Can be combined with the footer. Both the header and the footer have a few modes: default, medium, small, and no padding (just like the panel)

Toggle source (Jade)
+surrounded-panel
	+panel-header
		span This is the header area!
	+panel-content
		p And this is the actual content of the component.

An optional add-on to a standard panel that should be placed at the bottom of the content block.

Toggle source (Jade)
+surrounded-panel()
	+panel-content()
		p And this is the actual content of the component.
	+panel-footer()
		| This is the footer area!