Block

The Block component is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them.

API Documentation

How it works #

The Block component is a simple layout utility that provides vertical spacing between sibling elements. It helps organize content by visually separating sections or groups of content with consistent margins.

How to use:
  1. Wrap your content inside the <Block> component to create a visually separated section.
  2. Place multiple Block components as siblings to automatically add spacing between them.
  3. Each Block will apply margin at the bottom, except for the last one, ensuring clean separation without extra space at the end.
This demo illustrates how to use the Block component to structure your page with clear, consistent spacing between content sections.
This text is within a block.
This text is within a second block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
This text is within a third block. This block has no margin at the bottom. 
<Block>
    This text is within a <strong>block</strong>.
</Block>
<Block>
    This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</Block>
<Block>
    This text is within a <strong>third block</strong>. This block has no margin at the bottom.
</Block>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!