Border Content

Create nice sectioned content with borders to separate the it.

Regular

EXAMPLE

Border Content

Look at the pretty border content

<BorderContent>
<h2>Border Content</h2>
<p>Look at the pretty border content</p>
</BorderContent>

Sides

Change the sides the border is painted on.

EXAMPLE

Sides

Look at the pretty border content

Sides

Look at the pretty border content

<Columns>
<BorderContent sides="true true true true">
<h2>Sides</h2>
<p>Look at the pretty border content</p>
</BorderContent>
<BorderContent sides="true false false false">
<h2>Sides</h2>
<p>Look at the pretty border content</p>
</BorderContent>
</Columns>

Color

Change the default blue color to whatever color you'd like in the theme.

EXAMPLE

Color

Look at the pretty border content

<BorderContent color="red">
<h2>Color</h2>
<p>Look at the pretty border content</p>
</BorderContent>

Size

Change the px width of the border.

EXAMPLE

Size

Look at the pretty border content

<BorderContent size="5" color="orange" sides="true false false true">
<h2>Size</h2>
<p>Look at the pretty border content</p>
</BorderContent>

API

NameTypeDefaultDescription
childrennodeContent to be displayed within the border content container.
sidesstringfalse, false, false, truePass in the sides you would like the border to fill. The default is just the left side. The values represent top, right, bottom, then left.
colorstringblueTheme color that will change the color of the borders.
sizestring2pxThis sets the px width of the border.