Design: focus blocks

How to use

Rendering語系代碼
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

標題
vivid-10

標題
Some text here
標題
vivid-20

標題
Some text here
標題
vivid-30

標題
Some text here
標題
vivid-40

標題
Some text here
標題
vivid-50

標題
Some text here
標題
vivid-60

標題
Some text here
標題
vivid-70

標題
Some text here
標題
vivid-80

標題
Some text here
標題
vivid-90

標題
Some text here
標題
vivid-100

標題
Some text here
標題
vivid-110

標題
Some text here
標題
vivid-120

標題
Some text here
標題
vivid-130

標題
Some text here
標題
vivid-140

標題
Some text here
標題
vivid-150

標題
Some text here
標題
vivid-160

標題
Some text here
標題
vivid-170

標題
Some text here
標題
vivid-180

標題
Some text here
標題
vivid-190

標題
Some text here
標題
vivid-200

標題
Some text here
標題
vivid-210

標題
Some text here
標題
vivid-220

標題
Some text here
標題
vivid-230

標題
Some text here
標題
vivid-240

標題
Some text here
標題
vivid-250

標題
Some text here
標題
vivid-260

標題
Some text here
標題
vivid-270

標題
Some text here
標題
vivid-280

標題
Some text here
標題
vivid-290

標題
Some text here
標題
vivid-300

標題
Some text here
標題
vivid-310

標題
Some text here
標題
vivid-320

標題
Some text here
標題
vivid-330

標題
Some text here
標題
vivid-340

標題
Some text here
標題
vivid-350

標題
Some text here
標題
vivid-360

標題
Some text here

Color classes

標題
color-10

標題
Some text here
標題
color-20

標題
Some text here
標題
color-30

標題
Some text here
標題
color-40

標題
Some text here
標題
color-50

標題
Some text here
標題
color-60

標題
Some text here
標題
color-70

標題
Some text here
標題
color-80

標題
Some text here
標題
color-90

標題
Some text here
標題
color-100

標題
Some text here
標題
color-110

標題
Some text here
標題
color-120

標題
Some text here
標題
color-130

標題
Some text here
標題
color-140

標題
Some text here
標題
color-150

標題
Some text here
標題
color-160

標題
Some text here
標題
color-170

標題
Some text here
標題
color-180

標題
Some text here
標題
color-190

標題
Some text here
標題
color-200

標題
Some text here
標題
color-210

標題
Some text here
標題
color-220

標題
Some text here
標題
color-230

標題
Some text here
標題
color-240

標題
Some text here
標題
color-250

標題
Some text here
標題
color-260

標題
Some text here
標題
color-270

標題
Some text here
標題
color-280

標題
Some text here
標題
color-290

標題
Some text here
標題
color-300

標題
Some text here
標題
color-310

標題
Some text here
標題
color-320

標題
Some text here
標題
color-330

標題
Some text here
標題
color-340

標題
Some text here
標題
color-350

標題
Some text here
標題
color-360

標題
Some text here

Grey classes

標題
grey-60

標題
Some text here
標題
grey-120

標題
Some text here
標題
grey-180

標題
Some text here
標題
grey-240

標題
Some text here
標題
grey-300

標題
Some text here
標題
grey-360

標題
Some text here

Sizes

標題

size-1


標題

Some text here


標題

size-2


標題

Some text here


標題

size-3


標題

Some text here


標題

size-4


標題

Some text here


標題

size-5


標題

Some text here


標題

size-6


標題

Some text here


標題

size-7


標題

Some text here


標題

size-8


標題

Some text here


標題

size-9


標題

Some text here


標題

size-10


標題

Some text here


標題

size-11


標題

Some text here


標題

size-12


標題

Some text here