ComboStrap UI - Box

Undraw Website Builder Re Ii6e

About

A box is a component that permits to contain other components.

This is useful to:

Because a box is a general layout component, there is no automatic paragraph creation on a new line, you should use the text component to layout your text in a box.

Example

<box background-color="#e6b594" width="150px" align="center text-center" spacing="p-4 m-5">
A brown rectangle
</box>

where:

Output:

A brown rectangle




Showcase yourself and your brand

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




Related HowTo's
Undraw Animating
How to split the horizontal space in two with the grid component ?

This howto shows you how to split the horizontal space in two with the grid component. The grid component splits the horizontal space across its children. By default, it will do it across: 4 children...


Recommended Pages
Undraw My Documents
ComboStrap Styling - Border

The border is the line that delimits the block components. Every block component will react to the styling attribute border-color that sets the color of their border. Example with the generic box...
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 Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Undraw Website Builder Re Ii6e
Grid Layout: How to create a responsive space distribution on the horizontal axis

grid is a component that permits to distribute the horizontal space in a responsive fashion (ie suitable for mobile screen). The children: will go to a new line in a centered position (by default)...
Main Header Slot Manager
Main Header Slot

The main header slot is a slot that will replace the default main header of your template. Below is an example of main header. where: breadcrumb is the hiearchical breadcrumb box is a box with...
Undraw My Documents
Shadow - This attribute will create a shadow, giving more emphasis

Shadows are used mostly to add more emphasis to important component or to add a elevation effect.



Task Runner