Block | Bulma-Gomponents

Block

The b.Block constructor returns a container that ensures siblings have a consistent margin.

Bulma examples

Example

Code

b.Block("This text is within a ", e.Strong("block"), "."),
b.Block("This text is within a ", e.Strong("second block"), ". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis."),
b.Block("This text is within a ", e.Strong("third block"), ". This block has no margin at the bottom.")

ResultHTML

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.

<div class="block">This text is within a <strong>block</strong>.</div>
<div class="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.</div>
<div class="block">This text is within a <strong>third block</strong>. This block has no margin at the bottom.</div>

Example

Code

e.Div("This text is ", e.Em("not"), " within a ", e.Strong("block"), "."),
e.Div("This text ", e.Em("isn't"), " within a ", e.Strong("block"), " either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis."),
e.Div("This text is also ", e.Em("not"), " within a ", e.Strong("block"), ".")

ResultHTML

This text is not within a block.

This text isn't within a block either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

This text is also not within a block.

<div>This text is <em>not</em> within a <strong>block</strong>.</div>
<div>This text <em>isn&#39;t</em> within a <strong>block</strong> either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.</div>
<div>This text is also <em>not</em> within a <strong>block</strong>.</div>