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_color="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_color
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: