Design: focus blocks

How to use

RenderingCode
Start here

Below, you can find the most basic template.
Use it as a starting point.

<div class='focus-block'>
<h5>Start here</h5>
Below, you can find the most basic template.
Use it as a starting point.
</div>

<div class='focus-block'>
<h5></h5>

</div>
Use the code beside to prevent the automatic creation of a table of content.
[toc hidden: 1]
Add some colours

Add classes next to the "focus-block" class to make things more colorful.
The "vivid-" classes give bright colors.
Here we have added the "vivid-360" class to get a bright red.
See below for a list of "vivid-" classes.

<div class='focus-block vivid-360'>
<h5>Add some colours</h5>
Add classes next to the "focus-block" class to make things more colorful.
The "vivid-" classes give bright colors.
Here we have added the "vivid-360" class to get a bright red.
See below for a list of "vivid-" classes.
</div>
More colours

The "color-" classes provide more subdued tints.
Here, we have chosen "color-100" for a slightly faded green.
See below fo a list of "color-" classes.

<div class='focus-block color-100'>
<h5>More colours</h5>
The "color-" classes provide more subdued tints.
Here, we have chosen "color-100" for a slightly faded green.
See below fo a list of "color-" classes.
</div>
Sizes matter

Control the size with the "size-" classes.
Here, we have added the "size-6" class to get a bigger box.
Try from size-1 to size-12. See below for more samples.

<div class='focus-block size-6'>
<h5>Sizes matter</h5>
Control the size with the "size-" classes.
Here, we have added the "size-6" class to get a bigger box.
Try from size-1 to size-12. See below for more samples.
</div>
Stack some blocks

By default, focus blocks get stacked on the left.

Stack some blocks

By default, focus blocks get stacked on the left.

<div class='focus-block size-2'>
<h5>Stack some blocks</h5>
By default, focus blocks get stacked on the left.
</div>
Center everything

Encompass everything inside a <div> with the "center" class to have the boxes centered in the middle.

Center everything

Encompass everything inside a <div> with the "center" class to have the boxes centered in the middle.

<div class='center'>
<div class='focus-block size-2'>
<h5>Center everything</h5>
Encompass everything inside a <div> with the "center" class to have the boxes centered in the middle.
</div>
</div>

Vivid classes

Title
vivid-10

Title
Some text here
Title
vivid-20

Title
Some text here
Title
vivid-30

Title
Some text here
Title
vivid-40

Title
Some text here
Title
vivid-50

Title
Some text here
Title
vivid-60

Title
Some text here
Title
vivid-70

Title
Some text here
Title
vivid-80

Title
Some text here
Title
vivid-90

Title
Some text here
Title
vivid-100

Title
Some text here
Title
vivid-110

Title
Some text here
Title
vivid-120

Title
Some text here
Title
vivid-130

Title
Some text here
Title
vivid-140

Title
Some text here
Title
vivid-150

Title
Some text here
Title
vivid-160

Title
Some text here
Title
vivid-170

Title
Some text here
Title
vivid-180

Title
Some text here
Title
vivid-190

Title
Some text here
Title
vivid-200

Title
Some text here
Title
vivid-210

Title
Some text here
Title
vivid-220

Title
Some text here
Title
vivid-230

Title
Some text here
Title
vivid-240

Title
Some text here
Title
vivid-250

Title
Some text here
Title
vivid-260

Title
Some text here
Title
vivid-270

Title
Some text here
Title
vivid-280

Title
Some text here
Title
vivid-290

Title
Some text here
Title
vivid-300

Title
Some text here
Title
vivid-310

Title
Some text here
Title
vivid-320

Title
Some text here
Title
vivid-330

Title
Some text here
Title
vivid-340

Title
Some text here
Title
vivid-350

Title
Some text here
Title
vivid-360

Title
Some text here

Color classes

Title
color-10

Title
Some text here
Title
color-20

Title
Some text here
Title
color-30

Title
Some text here
Title
color-40

Title
Some text here
Title
color-50

Title
Some text here
Title
color-60

Title
Some text here
Title
color-70

Title
Some text here
Title
color-80

Title
Some text here
Title
color-90

Title
Some text here
Title
color-100

Title
Some text here
Title
color-110

Title
Some text here
Title
color-120

Title
Some text here
Title
color-130

Title
Some text here
Title
color-140

Title
Some text here
Title
color-150

Title
Some text here
Title
color-160

Title
Some text here
Title
color-170

Title
Some text here
Title
color-180

Title
Some text here
Title
color-190

Title
Some text here
Title
color-200

Title
Some text here
Title
color-210

Title
Some text here
Title
color-220

Title
Some text here
Title
color-230

Title
Some text here
Title
color-240

Title
Some text here
Title
color-250

Title
Some text here
Title
color-260

Title
Some text here
Title
color-270

Title
Some text here
Title
color-280

Title
Some text here
Title
color-290

Title
Some text here
Title
color-300

Title
Some text here
Title
color-310

Title
Some text here
Title
color-320

Title
Some text here
Title
color-330

Title
Some text here
Title
color-340

Title
Some text here
Title
color-350

Title
Some text here
Title
color-360

Title
Some text here

Grey classes

Title
grey-60

Title
Some text here
Title
grey-120

Title
Some text here
Title
grey-180

Title
Some text here
Title
grey-240

Title
Some text here
Title
grey-300

Title
Some text here
Title
grey-360

Title
Some text here

Sizes

Title

size-1


Title

Some text here


Title

size-2


Title

Some text here


Title

size-3


Title

Some text here


Title

size-4


Title

Some text here


Title

size-5


Title

Some text here


Title

size-6


Title

Some text here


Title

size-7


Title

Some text here


Title

size-8


Title

Some text here


Title

size-9


Title

Some text here


Title

size-10


Title

Some text here


Title

size-11


Title

Some text here


Title

size-12


Title

Some text here