Content Text Block

A text block wraps around multiple lines of text and provides text formatting options.

Examples

Standard Text Block

Showing a text block with a background color and line of text.

Source

HTML

<content-text-block background="#000" style-class="light">
  <content-line>Hello World</content-line>
</content-text-block>
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

Clickable Text Block with Button

This example shows a text block with a content button wrapped in a content button. This allows both the block and button to be linkable.

Source

HTML

<content-button href="#link1" clickable-block="true">
  <content-text-block>
    <content-line>Line 1</content-line>
    <content-line>Line 2</content-line>
    <content-line>Line 3</content-line>
    <content-button href="#link2">I'm clickable as well</content-button>
  </content-text-block>
</content-button>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

.content-block-default-button {
  border: 1px solid black;
  margin: 20px;
}