Panels

Panels are just boxed areas of content. Carbon adds a panel shortcode (N.B. note that this shortcode will not move between other non-Bedrock themes).

What is a panel?

THIS is! Panels are great for breaking up long chunks of text with an short quote, an aside or something related. They can be used to explain or define key terms in the text.

Parameters

By default just surrounding the content you want to appear in a panel with the opening [panel] and closing [/panel] shortcode tags. The theme will choose some defaults based on your current theme settings. However, if you want to set colors, etc. yourself, you can do that easily by setting parameters on the shortcode:

[panel color="hex/rgba color" border_color="hex/rgba color" border_width="css border width" border_style="css border style" text_col="hex/rgba color" padding="css padding value"] YOUR CONTENT HERE [/panel]

N.B. All parameters are optional.

color

Optional: (default = computed based on page color). The background color of the panel. Colors are specified in hex triplet (e.g. “#000000” = black) or rgba (e.g. “rgba(0,0,0,1)” = black) format.

border_color

Optional: (default = none). The border color of the panel. Colors are specified in hex triplet (e.g. “#000000” = black) or rgba (e.g. “rgba(0,0,0,1)” = black) format.

border_width

Optional: (default = none). The border width of the panel. Note that for this to be applied you must also specify a valid value for border_style. Use any valid CSS units (i.e. “6px”, “6%”, etc.). Carbon uses the “rems” unit of measurement so if you want to stay consistent specify your values in rems.

border_style

Optional: (default = none). The border style of the panel. Use any valid CSS border style (i.e. “dashed”, “solid”, etc).

text_col

Optional: (default = page text color). The text color of the panel. Colors are specified in hex triplet (e.g. “#000000” = black) or rgba (e.g. “rgba(0,0,0,1)” = black) format.

padding

Optional: (default = 3%). The padding between the panel content and it’s edge. Use any valid CSS units (i.e. “6px”, “6%”, etc.). Carbon uses the “rems” unit of measurement so if you want to stay consistent specify your values in rems.

Example

The following shortcode:

[panel color="#FDD653" text_color="#000000" border_width="0.4rem" border_style="dashed" border_color="#FC8A00" ] This is my new exciting panel, how do you like it? [/panel]

Will create the following panel:

This is my new exciting panel, how do you like it?