ComboStrap UI - Bar component

About

A bar is an ui component that divides a page in horizontal region.

Visually, the division can be done through the use of a:

• background.
• or a separator

bar are used:

• in a fat footer
• in a page header
• or in landing page.

Example

Bar with a blue background

<bar color="white" text-align="center" background-color="blue">
    <heading 2>A blue slide</heading>
    <text lead>
**A unique collection of UI elements that are all flexible, modular and composable.  \\
A complete solution to building a professional website.**
     </text>
</bar>

Bar with a background image

<bar color="steelblue" text-align="center" >
   <background>{{:docs:block:stock_image_surfer_in_the_see.png|}}</background>
    <title 2>A blue slide</title>
    <text lead>
**A unique collection of UI elements that are all flexible, modular and composable.  \\
A complete solution to building a professional website.**
     </text>
</bar>

Syntax

<bar hero="md|sm|lg|xl">
   <background></background>
   <backgrounds>
       <background></background>
       ...
       <background></background>
   </backgrounds>
   My horizontal bar
</bar>

where:

• hero defines the hero space (default value of sm)
• background is the optional background definition