A bar - A horizontal region

Undraw Website Builder Re Ii6e

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:

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:




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Landing Template Value
How to create a landing page?

This article shows you how to create a landing page with the markup component A landing page is a page with big horizontal sections that shows off your product or services. For your page, you should...


Recommended Pages
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Undraw My Documents
ComboStrap UI - Block

A block component is a component that wraps/encapsulate: content such as text, image,... other block component If the component should start at a new line or expand on multiple line and you can...
Undraw My Documents
Hero

hero is a styling attribute for showcasing hero unit style content. An hero is just a UX design term that refers to an oversized component such as: the section of a landing page a page content header...
Landing Layout
Landing Template

landing is a template that permits to create landing pages. In a landing page layout: The main content is not contained (You need to use bar components to create the purple area) The page header,...
Undraw Website Builder Re Ii6e
Layout Containment

ComboStrap UI - Container Aware Component The containment configuration choose if the container-aware components will: position their content at the center limit their horizontal width (adjusted...
Undraw Website Builder Re Ii6e
Page Footer Slot

The page footer slot is a slot that replaces the default fat footer of the template. To create this slot, you need to create a markup document/page with the name slot_footer Example: with: two cells...



Task Runner