---json
{
    "description": "They are use to slice a page into section",
    "page_id": "b2kmejezc3p4cu4n9c51m",
    "title": "A bar - A horizontal region"
}
---
====== ComboStrap UI - Bar component ======

===== About =====
A ''bar'' is an [[docs:component|ui component]] that divides a page in horizontal region.

Visually, the division can be done through the use of a:
  * [[docs:styling:background|background]].
  * or a separator

''bar'' are used:
  * in a [[:docs:theme:element:page-footer|fat footer]]
  * in a [[:docs:theme:slot:header_slot|page header]]
  * or in [[:howto:landing-page|landing page]].



===== Example =====


==== Bar with a blue background ====

<webcode name="Default" frameborder="0">
<code dw>
<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>

</code>
</webcode>

==== Bar with a background image ====

<webcode name="Default" frameborder="0">
<code dw>
<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>
</code>
</webcode>




===== Syntax =====

<code dw>
<bar hero="md|sm|lg|xl">
   <background></background>
   <backgrounds>
       <background></background>
       ...
       <background></background>
   </backgrounds>
   My horizontal bar
</bar>
</code>
where:
  * ''hero'' defines the [[:docs:styling:hero|hero space]] (default value of ''sm'')
  * ''background'' is the optional [[docs:styling:background|background definition]]

<note>
  * ''bar'' is a container component and will follow the [[docs:theme:element:container|layout container configuration]]
  * This is also an [[docs:marki|super HTML component]] and accepts therefore all [[docs:styling:styling|styling attributes]]
</note>