Panes

When to use

Panes allow you to make a visual separation between different parts of your page. You may want to set-off a contextual menu or emphasize certain resources on your page.

Basic usage

[pane][endpane]

Without attributes, [pane] puts a 1 pixel gray border around your text with a white background color.

Optional Attributes

  • color — changes color of panel to either:
    • blue
    • red
    • green
    • yellow
    • gray
    • orange
    • light-gray
    • dark-blue
    • illini-orange
    • juicy-orange
    • illini-blue
    • smoky-blue
    • burgundy

Steps

  1. Open the pane:
    [pane]
  2. Enter your content:
    Some interesting content in a blank pane.
  3. Close the pane:
    [endpane]

Result

Code


[pane]
Some interesting content in a blank pane.
[endpane]

Rendering



Some interesting content in a blank pane..

img attribute

[pane] has the optional attribute: img. This attribute includes an image on the left side of the panel.

Code

[pane img="https://www.library.illinois.edu/funkaces/UIUC_20071006_img_2261.jpg"]
Some interesting content in a blank pane.
[endpane]

Rendering


Some interesting content in a blank pane..


color attribute

[pane] has the optional attribute: color. This attribute changes the background color of the pane.

color="blue"

Code


[pane color="blue"]
Some interesting content in a blue pane.
[endpane]

Rendering



Some interesting content in a blue pane.

color="gray"

Code


[pane color="gray"]
Some interesting content in a gray pane.
[endpane]

Rendering



Some interesting content in a gray pane.

color="green"

Code


[pane color="green"]
Some interesting content in a green pane.
[endpane]

Rendering



Some interesting content in a green pane.

color="light-gray"

Code


[pane color="light-gray"]
Some interesting content in a light-gray pane.
[endpane]

Rendering



Some interesting content in a light-gray pane.

color="orange"

Code


[pane color="orange"]
Some interesting content in an orange pane.
[endpane]

Rendering



Some interesting content in an orange pane.

color="red"

Code


[pane color="red"]
Some interesting content in a red pane.
[endpane]

Rendering



Some interesting content in a red pane.

color="burgundy"

Code


[pane color="burgundy"]
Some interesting content in a burgundy pane.
[endpane]

Rendering



Some interesting content in a burgundy pane.

color="illini-orange"

Code


[pane color="illini-orange"]
Some interesting content in a illini-orange pane.
[endpane]

Rendering



Some interesting content in a illini-orange pane.

color="juicy-orange"

Code


[pane color="juicy-orange"]
Some interesting content in a juicy-orange pane.
[endpane]

Rendering



Some interesting content in a juicy-orange pane.

color="illini-blue"

Code


[pane color="illini-blue"]
Some interesting content in a illini-blue pane.
[endpane]

Rendering



Some interesting content in a illini-blue pane.

color="industrial"

Code


[pane color="industrial"]
Some interesting content in a smoky-blue pane.
[endpane]

Rendering



Some interesting content in an industrial blue pane.