Panel

A panel is a special presentation of text used to bring special attention to an important piece of content. There are no semantics imparted by this treatment, and assistive technology users will not have any indication that the content is highlighted. These should be treated as no more than text emphasis like bold or italics.

Code

<div class="panel {panel-color} {panel-heavy-border} {panel-padding} {panel-indent}">
    <!-- Panel contents -->
</div>

Classes

{panel-color}

Defines the background color of the panel.

Default: The background of the panel will be rgba(#cccccc, 0.2). The border color is rgba(#aaaaaa, 0.4).; A regular panel.
Dark (.dark): The background of the panel will be rgba(#222222, 0.92). There will be no border; instead there is a #ffffff box shadow added instead.; A dark panel.
Blue-Green (.accent-blue-green): The border color becomes rgba(#94c6d3,0.5) and the background color becomes rgba(#aee9f8,0.26).; A blue-green panel.
Blue (.accent-blue): The border color becomes rgba(#94abd3,0.45) and the background color becomes rgba(#aec9f8,0.26).; A blue panel.
Purple (.accent-purple): The border color becomes rgba(#ada3d5,0.45) and the background color becomes rgba(#cbc0fa,0.26).; A purple panel.
Gold (.accent-gold): The border color becomes rgba(#d0c391,0.55) and the background color becomes rgba(#f4e5aa,0.26).; A gold panel.
Green (.accent-green): The border color becomes rgba(#93d793,0.5) and the background color becomes rgba(#adfdad,0.26).; A green panel.
Red (.accent-red): The border color becomes rgba(#d99889,0.45) and the background color becomes rgba(#ffb3a1,0.26).; A red panel.

{panel-heavy-border}

Defines if the border of one of the edges should be thicker.

Default: The panel has a uniform 1px border.; A panel with a uniform thickness.
Heavy Left Border (.heavy-left): The panel's left border has a 3px width.; A panel with a thicker left border.
Heavy Top Border (.heavy-top): The panel's top border has a 3px width.; A panel with a thicker top border.

{panel-padding}

Defines the padding of the panel.

Default: The panel will have 0.4em top and bottompadding and 0.7em left and right padding.; A panel with medium padding.
No Padding (.collapse or .no-padding): The panel will have 0 padding.; A panel with no padding.
Extra Padding (.dialog or .padded): The panel will have 1em top and bottom padding and 1.1em left and right padding.; A panel with extra padding.

{panel-indent}

Defines the amount of indentaton the panel will have. Whenever the panel is "shifted" to the right, the width of the panel is also reduced accordingly.

Default: The panel will not be padded; A panel with no indent.
No Mobile Indent (.no-indent-mobile): When used in conjunction with the options below, mobile layouts (up to 479px wide) will not have indented panels.; A panel with one indent, but no indentation on mobile.
Indent Once (.indent1): The panel will be shifted 2% to the right.; A panel with one indent.
Indent Twice (.indent2): The panel will be shifted 4% to the right.; A panel with two indents.
Indent Three Times (.indent3): The panel will be shifted 6% to the right.; A panel with three indents.
Indent Four Times (.indent4): The panel will be shifted 8% to the right.; A panel with four indents.

Accessibility Expectations

Modality	Expected Behavior	Criterion
Visual	Web content must not rely solely on the visual presentation of panels (such as color, border, or indentation) to convey information. Ensure that any information conveyed visually is also available in text.	1.3.3
All	Web content must ensure that any information conveyed through the use of panels is also available in text. For example, do not rely solely on the color or style of the panel to communicate important information (e.g., "Items in red are prohibited").	1.4.1

Developer Notes

The best practice is to always apply panel classes to <div> tags. Avoid adding panel classes to inline elements, they could be mistaken for a button or other interactive element.

Designer Notes

When concept designing with panels, remember that they must be treated no different than bold text or italic text as far as text emphasis goes. Do not use panels for color coding or for conveying information without that information being in text.