Section

Define areas of a page

Applies to any elements of type or class section

Default

Item 1

Item 2

<section class="border">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</section>

Variants

class	description
border	adds 2px border to top and bottom
ttb	display content top to bottom
btt	display content bottom to top
ltr	display content left to right
rtl	display content right to left

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

<section class="ltr bg-violet">
  <div>Item 1</div>
  <div>Item 2</div>
</section>

<section class="rtl bg-coral">
  <div>Item 1</div>
  <div>Item 2</div>
</section>

<section class="btt bg-lemon border">
  <div>Item 1</div>
  <div>Item 2</div>
</section>

tip

Defaults to an clear background with purple text but customisable with all 6 key futureproof colors