A bar - A horizontal region

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:

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>

A blue slide

A unique collection of UI elements that are all flexible, modular and composable.
A complete solution to building a professional website.

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>

A blue slide

A unique collection of UI elements that are all flexible, modular and composable.
A complete solution to building a professional website.

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

bar is a container component and will follow the layout container configuration
This is also an super HTML component and accepts therefore all styling attributes