Layout

Choose your preferred layout

layoutlayoutlayout

Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brandbrand

Spacing

Padding

A wide range of shorthand responsive padding utility classes to modify an element’s appearance.

.pl-30
.pt-30
.pb-30
.pr-30
.px-30
.py-30
Class Values
class="pa-[value]"class="pl-[value]"class="pt-[value]"class="pb-[value]"class="pr-[value]"class="px-[value]"class="py-[value]" 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)
Media Query Padding

A wide range of shorthand media query utility classes for xl, lg, md and sm sizes.

Class Values
class="pa-[size]-[value]"class="pl-[size]-[value]"class="pt-[size]-[value]"class="pb-[size]-[value]"class="pr-[size]-[value]"class="px-[size]-[value]"class="py-[size]-[value]" 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)
Margin

A wide range of shorthand responsive margin utility classes to modify an element’s appearance.

.ml-30
.ml-50
Class Values
class="ma-[value]"class="ml-[value]"class="mt-[value]"class="mb-[value]"class="mr-[value]"class="mx-[value]"class="my-[value]" 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)
Media Query Margin

A wide range of shorthand media query utility classes for xl, lg, md and sm sizes.

Class Values
class="ma-[size]-[value]"class="ml-[size]-[value]"class="mt-[size]-[value]"class="mb-[size]-[value]"class="mr-[size]-[value]"class="mx-[size]-[value]"class="my-[size]-[value]" 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)