ComboStrap UI - Block

Undraw My Documents


A block component is a component that wraps/encapsulate:

If the component should start at a new line or expand on multiple line and you can draw some border around it, that's a block.

List of block component

  • Blockquote: A block of text with a citation.
  • Box - a generic box for advanced styling
  • Card (teaser): Do you want to put a text in a box with optionally an image and a button, that's a card
  • Code - a block of code
  • Comment - a comment
  • Console - a block representing the output of a command
  • File - a file
  • Jumbotron: Prominently at the top of your page emphase a content.
  • List - a list
  • Math: Writing math formulas
  • Note: An ancillary text that needs attention.
  • Related: A component showing the backlinks
  • Bar - A bar to divide a page in horizontal region
  • Text - Create one or more paragraph with the same styling
  • Webcode - Output the result of web code (HTML, Javascript, CSS)

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 align a text ?

This howto will show you how you can align your text. With ComboStrap, text alignment is only defined via the align attribute. There is three possible alignement: , ie left for a left-to-right...
Undraw Animating
How to center a box component ?

This howto shows you how to center a box component.

Recommended Pages
Undraw My Documents
ComboStrap - Line Spacing (Line height)

The line spacing attribute lets you set the space between each line in a paragraph
Undraw My Documents
ComboStrap - Text component - Apply text typographic effects

The text component lets you apply text typographic effects on one ore more paragraph.
Undraw My Documents
ComboStrap - UI Components

Components are the units of content creation for a page. Together, they create the content of the page.
Undraw Add Content Re Vgqa
ComboStrap Heading

A description for the search page result engine
Undraw My Documents
ComboStrap Styling - Align Attribute

align is an styling attribute of the HTML superset component It permits to align: the content of a component the component itself its children grid The align attribute values may applies: ...
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 Styling - Dimension (Width and Height)

Every Box components and even the whole main page dimension may be resized with the styling attributes: and . The width attributes support the following values: length - a length (in pixel,...
Spacing Margin Padding
ComboStrap Styling - Spacing (Margin, Padding)

spacing is the definition of the margin and padding between block component where: margin is a transparent space outside the box (not filled with the background color) padding is the space inside...
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
ComboStrap UI - Jumbotron

A jumbotron is a default Hero unit that emphase prominently its content. buttonleadtexthorizontal rule A jumbotron is a hero unit style content with a medium value by default where: the Hero...

Task Runner