Columns

Utility	Properties
Error: 429

This example sets the columns to 4. The c-4 utility divides the content into 4 equal columns.

A

B

C

D

<div class="c-4">
  <p class="bg-indigo rad-1 ta-c tc-white p-4">A</p>
  <p class="bg-indigo rad-1 ta-c tc-white p-4">B</p>
  <p class="bg-indigo rad-1 ta-c tc-white p-4">C</p>
  <p class="bg-indigo rad-1 ta-c tc-white p-4">D</p>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="c-1 md:c-2 ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="c-1 h:c-2 ..."></div>