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
Name | Type | Default | Description |
---|---|---|---|
children | node | Content to be displayed within the border content container. | |
sides | string | false, false, false, true | Pass 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. |
color | string | blue | Theme color that will change the color of the borders. |
size | string | 2px | This sets the px width of the border. |