Typography

Column

Utilities for set the multiple paragraphs text into columns to adjust and balance automatically allowing the content to flow naturally.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class css

column {count} {size} {fill} {gap} {bar-style} {bar-size} {bar-color} --column-count: auto;
--column-width: auto;
--column-fill: auto;
--column-gap: normal;
--column-rule-width: 1px;
--column-rule-style: none;
--column-rule-color: black;
column-count: var(--column-count);
column-width: var(--column-width);
column-fill: var(--column-fill);
column-gap: var(--column-gap);
column-rule-width: var(--column-rule-width);
column-rule-style: var(--column-rule-style);
column-rule-color: var(--column-rule-color);

class	css
column `{count}` `{size}` `{fill}` `{gap}` `{bar-style}` `{bar-size}` `{bar-color}`	--column-count: auto; --column-width: auto; --column-fill: auto; --column-gap: normal; --column-rule-width: 1px; --column-rule-style: none; --column-rule-color: black; column-count: var(--column-count); column-width: var(--column-width); column-fill: var(--column-fill); column-gap: var(--column-gap); column-rule-width: var(--column-rule-width); column-rule-style: var(--column-rule-style); column-rule-color: var(--column-rule-color);

class	css
count-2	--column-count: 2
count-3	--column-count: 3
count-4	--column-count: 4
count-5	--column-count: 5
count-6	--column-count: 6

class	css
size-12	--column-width: 12em
size-14	--column-width: 14em
size-16	--column-width: 16em
size-18	--column-width: 18em
size-20	--column-width: 20em
size-22	--column-width: 22em
size-24	--column-width: 24em
size-26	--column-width: 26em
size-28	--column-width: 28em

class	css
fill-auto	--column-fill: auto
fill-balance	--column-fill: balance

class	css
gap-2	--column-gap: 2em
gap-3	--column-gap: 3em
gap-4	--column-gap: 4em
gap-5	--column-gap: 5em
gap-6	--column-gap: 6em
gap-7	--column-gap: 7em
gap-8	--column-gap: 8em

class	css
bar-size-2	--column-rule-width: 2px
bar-size-4	--column-rule-width: 4px
bar-size-6	--column-rule-width: 6px
bar-size-8	--column-rule-width: 8px
bar-size-10	--column-rule-width: 10px

class	css
bar-none	--column-rule-style: none
bar-dotted	--column-rule-style: dotted
bar-dashed	--column-rule-style: dashed
bar-solid	--column-rule-style: solid

Usage

Content split with 3 columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="column count-3 size-10 gap-3">
  <p> ... </p>
  <p> ... </p>
  <p> ... </p>
</div>

HTML

.dummy {
  @extend
    .column,
    .count-3,
    .size-10,
    .gap-3;
}

SCSS

Countent split with 3 columns, each content has spacing and separator bar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="column count-3 size-10 gap-3 ... bar-size-2 bar-dotted ... bar-tint-violet-1">
  <p> ... </p>
  <p> ... </p>
  <p> ... </p>
</div>

HTML

.dummy {
  @extend
    .column,
    .count-3,
    .size-10,
    .gap-3,
    .bar-size-2,
    .bar-dotted,
    .bar-tint-violet-1;
}

SCSS