Reference
Every class in the Starter Library.
All 1,855 class groups, what CSS each one writes, and a sample where a sample helps. Generated from the library itself, so it cannot fall out of step with what ships.
Every class here also has responsive and pseudo-state variants: ucm-p-4--md applies from the md breakpoint up, ucm-bg-white--hover on hover, and they combine as ucm-p-4--hover--md. Prefix with i- to force !important. Only base names are listed — the variants follow the same pattern for all 1,855.
Spacing
683 classes
| Class | CSS | Example |
|---|---|---|
ucm-gap-0 | gap: 0; | |
ucm-gap-0-5 | gap: 0.125rem; | |
ucm-gap-1 | gap: 0.25rem; | |
ucm-gap-1-5 | gap: 0.375rem; | |
ucm-gap-2 | gap: 0.5rem; | |
ucm-gap-2-5 | gap: 0.625rem; | |
ucm-gap-3 | gap: 0.75rem; | |
ucm-gap-3-5 | gap: 0.875rem; | |
ucm-gap-4 | gap: 1rem; | |
ucm-gap-5 | gap: 1.25rem; | |
ucm-gap-6 | gap: 1.5rem; | |
ucm-gap-7 | gap: 1.75rem; | |
ucm-gap-8 | gap: 2rem; | |
ucm-gap-9 | gap: 2.25rem; | |
ucm-gap-10 | gap: 2.5rem; | |
ucm-gap-11 | gap: 2.75rem; | |
ucm-gap-12 | gap: 3rem; | |
ucm-gap-14 | gap: 3.5rem; | |
ucm-gap-16 | gap: 4rem; | |
ucm-gap-20 | gap: 5rem; | |
ucm-gap-24 | gap: 6rem; | |
ucm-gap-28 | gap: 7rem; | |
ucm-gap-32 | gap: 8rem; | |
ucm-gap-36 | gap: 9rem; | |
ucm-gap-40 | gap: 10rem; | |
ucm-gap-44 | gap: 11rem; | |
ucm-gap-48 | gap: 12rem; | |
ucm-gap-52 | gap: 13rem; | |
ucm-gap-56 | gap: 14rem; | |
ucm-gap-60 | gap: 15rem; | |
ucm-gap-64 | gap: 16rem; | |
ucm-gap-72 | gap: 18rem; | |
ucm-gap-80 | gap: 20rem; | |
ucm-gap-96 | gap: 24rem; | |
ucm-gap-px | gap: 1px; | |
ucm-gap-x-0 | column-gap: 0; | |
ucm-gap-x-0-5 | column-gap: 0.125rem; | |
ucm-gap-x-1 | column-gap: 0.25rem; | |
ucm-gap-x-1-5 | column-gap: 0.375rem; | |
ucm-gap-x-2 | column-gap: 0.5rem; | |
ucm-gap-x-2-5 | column-gap: 0.625rem; | |
ucm-gap-x-3 | column-gap: 0.75rem; | |
ucm-gap-x-3-5 | column-gap: 0.875rem; | |
ucm-gap-x-4 | column-gap: 1rem; | |
ucm-gap-x-4 | column-gap: 1rem; | |
ucm-gap-x-5 | column-gap: 1.25rem; | |
ucm-gap-x-6 | column-gap: 1.5rem; | |
ucm-gap-x-6 | column-gap: 1.5rem; | |
ucm-gap-x-7 | column-gap: 1.75rem; | |
ucm-gap-x-8 | column-gap: 2rem; | |
ucm-gap-x-8 | column-gap: 2rem; | |
ucm-gap-x-9 | column-gap: 2.25rem; | |
ucm-gap-x-10 | column-gap: 2.5rem; | |
ucm-gap-x-11 | column-gap: 2.75rem; | |
ucm-gap-x-12 | column-gap: 3rem; | |
ucm-gap-x-14 | column-gap: 3.5rem; | |
ucm-gap-x-16 | column-gap: 4rem; | |
ucm-gap-x-20 | column-gap: 5rem; | |
ucm-gap-x-24 | column-gap: 6rem; | |
ucm-gap-x-28 | column-gap: 7rem; | |
ucm-gap-x-32 | column-gap: 8rem; | |
ucm-gap-x-36 | column-gap: 9rem; | |
ucm-gap-x-40 | column-gap: 10rem; | |
ucm-gap-x-44 | column-gap: 11rem; | |
ucm-gap-x-48 | column-gap: 12rem; | |
ucm-gap-x-52 | column-gap: 13rem; | |
ucm-gap-x-56 | column-gap: 14rem; | |
ucm-gap-x-60 | column-gap: 15rem; | |
ucm-gap-x-64 | column-gap: 16rem; | |
ucm-gap-x-72 | column-gap: 18rem; | |
ucm-gap-x-80 | column-gap: 20rem; | |
ucm-gap-x-96 | column-gap: 24rem; | |
ucm-gap-x-px | column-gap: 1px; | |
ucm-gap-y-0 | row-gap: 0; | |
ucm-gap-y-0-5 | row-gap: 0.125rem; | |
ucm-gap-y-1 | row-gap: 0.25rem; | |
ucm-gap-y-1-5 | row-gap: 0.375rem; | |
ucm-gap-y-2 | row-gap: 0.5rem; | |
ucm-gap-y-2-5 | row-gap: 0.625rem; | |
ucm-gap-y-3 | row-gap: 0.75rem; | |
ucm-gap-y-3-5 | row-gap: 0.875rem; | |
ucm-gap-y-4 | row-gap: 1rem; | |
ucm-gap-y-4 | row-gap: 1rem; | |
ucm-gap-y-5 | row-gap: 1.25rem; | |
ucm-gap-y-6 | row-gap: 1.5rem; | |
ucm-gap-y-6 | row-gap: 1.5rem; | |
ucm-gap-y-7 | row-gap: 1.75rem; | |
ucm-gap-y-8 | row-gap: 2rem; | |
ucm-gap-y-8 | row-gap: 2rem; | |
ucm-gap-y-9 | row-gap: 2.25rem; | |
ucm-gap-y-10 | row-gap: 2.5rem; | |
ucm-gap-y-11 | row-gap: 2.75rem; | |
ucm-gap-y-12 | row-gap: 3rem; | |
ucm-gap-y-14 | row-gap: 3.5rem; | |
ucm-gap-y-16 | row-gap: 4rem; | |
ucm-gap-y-20 | row-gap: 5rem; | |
ucm-gap-y-24 | row-gap: 6rem; | |
ucm-gap-y-28 | row-gap: 7rem; | |
ucm-gap-y-32 | row-gap: 8rem; | |
ucm-gap-y-36 | row-gap: 9rem; | |
ucm-gap-y-40 | row-gap: 10rem; | |
ucm-gap-y-44 | row-gap: 11rem; | |
ucm-gap-y-48 | row-gap: 12rem; | |
ucm-gap-y-52 | row-gap: 13rem; | |
ucm-gap-y-56 | row-gap: 14rem; | |
ucm-gap-y-60 | row-gap: 15rem; | |
ucm-gap-y-64 | row-gap: 16rem; | |
ucm-gap-y-72 | row-gap: 18rem; | |
ucm-gap-y-80 | row-gap: 20rem; | |
ucm-gap-y-96 | row-gap: 24rem; | |
ucm-gap-y-px | row-gap: 1px; | |
ucm-left-0-5 | left: 0.125rem; | |
ucm-left-1 | left: 0.25rem; | |
ucm-left-1-2 | left: 50%; | |
ucm-left-1-3 | left: 33.333%; | |
ucm-left-1-4 | left: 25%; | |
ucm-left-2 | left: 0.5rem; | |
ucm-left-2-3 | left: 66.667%; | |
ucm-left-3 | left: 0.75rem; | |
ucm-left-3-4 | left: 75%; | |
ucm-left-4 | left: 1rem; | |
ucm-left-5 | left: 1.25rem; | |
ucm-left-6 | left: 1.5rem; | |
ucm-left-8 | left: 2rem; | |
ucm-left-10 | left: 2.5rem; | |
ucm-left-12 | left: 3rem; | |
ucm-left-16 | left: 4rem; | |
ucm-left-20 | left: 5rem; | |
ucm-left-24 | left: 6rem; | |
ucm-left-32 | left: 8rem; | |
ucm-left-40 | left: 10rem; | |
ucm-left-48 | left: 12rem; | |
ucm-left-64 | left: 16rem; | |
ucm-left-96 | left: 24rem; | |
ucm-left-auto | left: auto; | |
ucm-left-full | left: 100%; | |
ucm-left-px | left: 1px; | |
ucm-m-0 | margin: 0; | |
ucm-m-0-5 | margin: 0.125rem; | |
ucm-m-1 | margin: 0.25rem; | |
ucm-m-1-5 | margin: 0.375rem; | |
ucm-m-2 | margin: 0.5rem; | |
ucm-m-2-5 | margin: 0.625rem; | |
ucm-m-3 | margin: 0.75rem; | |
ucm-m-3-5 | margin: 0.875rem; | |
ucm-m-4 | margin: 1rem; | |
ucm-m-5 | margin: 1.25rem; | |
ucm-m-6 | margin: 1.5rem; | |
ucm-m-7 | margin: 1.75rem; | |
ucm-m-8 | margin: 2rem; | |
ucm-m-9 | margin: 2.25rem; | |
ucm-m-10 | margin: 2.5rem; | |
ucm-m-11 | margin: 2.75rem; | |
ucm-m-12 | margin: 3rem; | |
ucm-m-14 | margin: 3.5rem; | |
ucm-m-16 | margin: 4rem; | |
ucm-m-20 | margin: 5rem; | |
ucm-m-24 | margin: 6rem; | |
ucm-m-28 | margin: 7rem; | |
ucm-m-32 | margin: 8rem; | |
ucm-m-36 | margin: 9rem; | |
ucm-m-40 | margin: 10rem; | |
ucm-m-44 | margin: 11rem; | |
ucm-m-48 | margin: 12rem; | |
ucm-m-52 | margin: 13rem; | |
ucm-m-56 | margin: 14rem; | |
ucm-m-60 | margin: 15rem; | |
ucm-m-64 | margin: 16rem; | |
ucm-m-72 | margin: 18rem; | |
ucm-m-80 | margin: 20rem; | |
ucm-m-96 | margin: 24rem; | |
ucm-m-auto | margin: auto; | |
ucm-m-px | margin: 1px; | |
ucm-mb-0 | margin-block-end: 0; | |
ucm-mb-0-5 | margin-bottom: 0.125rem; | |
ucm-mb-1 | margin-block-end: 0.25rem; | |
ucm-mb-1-5 | margin-bottom: 0.375rem; | |
ucm-mb-2 | margin-block-end: 0.5rem; | |
ucm-mb-2-5 | margin-bottom: 0.625rem; | |
ucm-mb-3 | margin-block-end: 0.75rem; | |
ucm-mb-3-5 | margin-bottom: 0.875rem; | |
ucm-mb-4 | margin-block-end: 1rem; | |
ucm-mb-5 | margin-block-end: 1.25rem; | |
ucm-mb-6 | margin-block-end: 1.5rem; | |
ucm-mb-7 | margin-bottom: 1.75rem; | |
ucm-mb-8 | margin-block-end: 2rem; | |
ucm-mb-9 | margin-bottom: 2.25rem; | |
ucm-mb-10 | margin-block-end: 2.5rem; | |
ucm-mb-11 | margin-bottom: 2.75rem; | |
ucm-mb-12 | margin-block-end: 3rem; | |
ucm-mb-14 | margin-bottom: 3.5rem; | |
ucm-mb-16 | margin-block-end: 4rem; | |
ucm-mb-20 | margin-block-end: 5rem; | |
ucm-mb-24 | margin-bottom: 6rem; | |
ucm-mb-28 | margin-bottom: 7rem; | |
ucm-mb-32 | margin-bottom: 8rem; | |
ucm-mb-36 | margin-bottom: 9rem; | |
ucm-mb-40 | margin-bottom: 10rem; | |
ucm-mb-44 | margin-bottom: 11rem; | |
ucm-mb-48 | margin-bottom: 12rem; | |
ucm-mb-52 | margin-bottom: 13rem; | |
ucm-mb-56 | margin-bottom: 14rem; | |
ucm-mb-60 | margin-bottom: 15rem; | |
ucm-mb-64 | margin-bottom: 16rem; | |
ucm-mb-72 | margin-bottom: 18rem; | |
ucm-mb-80 | margin-bottom: 20rem; | |
ucm-mb-96 | margin-bottom: 24rem; | |
ucm-mb-auto | margin-bottom: auto; | |
ucm-mb-px | margin-bottom: 1px; | |
ucm-ml-0 | margin-left: 0; | |
ucm-ml-0-5 | margin-left: 0.125rem; | |
ucm-ml-1 | margin-left: 0.25rem; | |
ucm-ml-1-5 | margin-left: 0.375rem; | |
ucm-ml-2-5 | margin-left: 0.625rem; | |
ucm-ml-3 | margin-left: 0.75rem; | |
ucm-ml-3-5 | margin-left: 0.875rem; | |
ucm-ml-4 | margin-left: 1rem; | |
ucm-ml-5 | margin-left: 1.25rem; | |
ucm-ml-6 | margin-left: 1.5rem; | |
ucm-ml-7 | margin-left: 1.75rem; | |
ucm-ml-8 | margin-left: 2rem; | |
ucm-ml-9 | margin-left: 2.25rem; | |
ucm-ml-10 | margin-left: 2.5rem; | |
ucm-ml-11 | margin-left: 2.75rem; | |
ucm-ml-12 | margin-left: 3rem; | |
ucm-ml-14 | margin-left: 3.5rem; | |
ucm-ml-16 | margin-left: 4rem; | |
ucm-ml-20 | margin-left: 5rem; | |
ucm-ml-24 | margin-left: 6rem; | |
ucm-ml-28 | margin-left: 7rem; | |
ucm-ml-32 | margin-left: 8rem; | |
ucm-ml-36 | margin-left: 9rem; | |
ucm-ml-40 | margin-left: 10rem; | |
ucm-ml-44 | margin-left: 11rem; | |
ucm-ml-48 | margin-left: 12rem; | |
ucm-ml-52 | margin-left: 13rem; | |
ucm-ml-56 | margin-left: 14rem; | |
ucm-ml-60 | margin-left: 15rem; | |
ucm-ml-64 | margin-left: 16rem; | |
ucm-ml-72 | margin-left: 18rem; | |
ucm-ml-80 | margin-left: 20rem; | |
ucm-ml-96 | margin-left: 24rem; | |
ucm-ml-auto | margin-left: auto; | |
ucm-ml-px | margin-left: 1px; | |
ucm-mr-0 | margin-right: 0; | |
ucm-mr-0-5 | margin-right: 0.125rem; | |
ucm-mr-1 | margin-right: 0.25rem; | |
ucm-mr-1-5 | margin-right: 0.375rem; | |
ucm-mr-2 | margin-right: 0.5rem; | |
ucm-mr-2-5 | margin-right: 0.625rem; | |
ucm-mr-3 | margin-right: 0.75rem; | |
ucm-mr-3-5 | margin-right: 0.875rem; | |
ucm-mr-4 | margin-right: 1rem; | |
ucm-mr-5 | margin-right: 1.25rem; | |
ucm-mr-6 | margin-right: 1.5rem; | |
ucm-mr-7 | margin-right: 1.75rem; | |
ucm-mr-8 | margin-right: 2rem; | |
ucm-mr-9 | margin-right: 2.25rem; | |
ucm-mr-10 | margin-right: 2.5rem; | |
ucm-mr-11 | margin-right: 2.75rem; | |
ucm-mr-12 | margin-right: 3rem; | |
ucm-mr-14 | margin-right: 3.5rem; | |
ucm-mr-16 | margin-right: 4rem; | |
ucm-mr-20 | margin-right: 5rem; | |
ucm-mr-24 | margin-right: 6rem; | |
ucm-mr-28 | margin-right: 7rem; | |
ucm-mr-32 | margin-right: 8rem; | |
ucm-mr-36 | margin-right: 9rem; | |
ucm-mr-40 | margin-right: 10rem; | |
ucm-mr-44 | margin-right: 11rem; | |
ucm-mr-48 | margin-right: 12rem; | |
ucm-mr-52 | margin-right: 13rem; | |
ucm-mr-56 | margin-right: 14rem; | |
ucm-mr-60 | margin-right: 15rem; | |
ucm-mr-64 | margin-right: 16rem; | |
ucm-mr-72 | margin-right: 18rem; | |
ucm-mr-80 | margin-right: 20rem; | |
ucm-mr-96 | margin-right: 24rem; | |
ucm-mr-auto | margin-right: auto; | |
ucm-mr-px | margin-right: 1px; | |
ucm-mt-0 | margin-block-start: 0; | |
ucm-mt-0-5 | margin-top: 0.125rem; | |
ucm-mt-1 | margin-block-start: 0.25rem; | |
ucm-mt-1-5 | margin-top: 0.375rem; | |
ucm-mt-2 | margin-block-start: 0.5rem; | |
ucm-mt-2-5 | margin-top: 0.625rem; | |
ucm-mt-3 | margin-block-start: 0.75rem; | |
ucm-mt-3-5 | margin-top: 0.875rem; | |
ucm-mt-4 | margin-block-start: 1rem; | |
ucm-mt-5 | margin-block-start: 1.25rem; | |
ucm-mt-6 | margin-block-start: 1.5rem; | |
ucm-mt-7 | margin-top: 1.75rem; | |
ucm-mt-8 | margin-block-start: 2rem; | |
ucm-mt-9 | margin-top: 2.25rem; | |
ucm-mt-10 | margin-block-start: 2.5rem; | |
ucm-mt-11 | margin-top: 2.75rem; | |
ucm-mt-12 | margin-block-start: 3rem; | |
ucm-mt-14 | margin-top: 3.5rem; | |
ucm-mt-16 | margin-block-start: 4rem; | |
ucm-mt-20 | margin-block-start: 5rem; | |
ucm-mt-24 | margin-top: 6rem; | |
ucm-mt-28 | margin-top: 7rem; | |
ucm-mt-32 | margin-top: 8rem; | |
ucm-mt-36 | margin-top: 9rem; | |
ucm-mt-40 | margin-top: 10rem; | |
ucm-mt-44 | margin-top: 11rem; | |
ucm-mt-48 | margin-top: 12rem; | |
ucm-mt-52 | margin-top: 13rem; | |
ucm-mt-56 | margin-top: 14rem; | |
ucm-mt-60 | margin-top: 15rem; | |
ucm-mt-64 | margin-top: 16rem; | |
ucm-mt-72 | margin-top: 18rem; | |
ucm-mt-80 | margin-top: 20rem; | |
ucm-mt-96 | margin-top: 24rem; | |
ucm-mt-auto | margin-top: auto; | |
ucm-mt-px | margin-top: 1px; | |
ucm-mx-0 | margin-inline: 0; | |
ucm-mx-0-5 | margin-inline: 0.125rem; | |
ucm-mx-1 | margin-inline: 0.25rem; | |
ucm-mx-1-5 | margin-inline: 0.375rem; | |
ucm-mx-2 | margin-inline: 0.5rem; | |
ucm-mx-2-5 | margin-inline: 0.625rem; | |
ucm-mx-3 | margin-inline: 0.75rem; | |
ucm-mx-3-5 | margin-inline: 0.875rem; | |
ucm-mx-4 | margin-inline: 1rem; | |
ucm-mx-5 | margin-inline: 1.25rem; | |
ucm-mx-6 | margin-inline: 1.5rem; | |
ucm-mx-7 | margin-inline: 1.75rem; | |
ucm-mx-8 | margin-inline: 2rem; | |
ucm-mx-9 | margin-inline: 2.25rem; | |
ucm-mx-10 | margin-inline: 2.5rem; | |
ucm-mx-11 | margin-inline: 2.75rem; | |
ucm-mx-12 | margin-inline: 3rem; | |
ucm-mx-14 | margin-inline: 3.5rem; | |
ucm-mx-16 | margin-inline: 4rem; | |
ucm-mx-20 | margin-inline: 5rem; | |
ucm-mx-24 | margin-inline: 6rem; | |
ucm-mx-28 | margin-inline: 7rem; | |
ucm-mx-32 | margin-inline: 8rem; | |
ucm-mx-36 | margin-inline: 9rem; | |
ucm-mx-40 | margin-inline: 10rem; | |
ucm-mx-44 | margin-inline: 11rem; | |
ucm-mx-48 | margin-inline: 12rem; | |
ucm-mx-52 | margin-inline: 13rem; | |
ucm-mx-56 | margin-inline: 14rem; | |
ucm-mx-60 | margin-inline: 15rem; | |
ucm-mx-64 | margin-inline: 16rem; | |
ucm-mx-72 | margin-inline: 18rem; | |
ucm-mx-80 | margin-inline: 20rem; | |
ucm-mx-96 | margin-inline: 24rem; | |
ucm-mx-auto | margin-inline: auto; | |
ucm-mx-px | margin-inline: 1px; | |
ucm-my-0 | margin-block: 0; | |
ucm-my-0-5 | margin-block: 0.125rem; | |
ucm-my-1 | margin-block: 0.25rem; | |
ucm-my-1-5 | margin-block: 0.375rem; | |
ucm-my-2 | margin-block: 0.5rem; | |
ucm-my-2-5 | margin-block: 0.625rem; | |
ucm-my-3 | margin-block: 0.75rem; | |
ucm-my-3-5 | margin-block: 0.875rem; | |
ucm-my-4 | margin-block: 1rem; | |
ucm-my-5 | margin-block: 1.25rem; | |
ucm-my-6 | margin-block: 1.5rem; | |
ucm-my-7 | margin-block: 1.75rem; | |
ucm-my-8 | margin-block: 2rem; | |
ucm-my-9 | margin-block: 2.25rem; | |
ucm-my-10 | margin-block: 2.5rem; | |
ucm-my-11 | margin-block: 2.75rem; | |
ucm-my-12 | margin-block: 3rem; | |
ucm-my-14 | margin-block: 3.5rem; | |
ucm-my-16 | margin-block: 4rem; | |
ucm-my-16 | margin-block: 4rem; | |
ucm-my-20 | margin-block: 5rem; | |
ucm-my-24 | margin-block: 6rem; | |
ucm-my-28 | margin-block: 7rem; | |
ucm-my-32 | margin-block: 8rem; | |
ucm-my-36 | margin-block: 9rem; | |
ucm-my-40 | margin-block: 10rem; | |
ucm-my-44 | margin-block: 11rem; | |
ucm-my-48 | margin-block: 12rem; | |
ucm-my-52 | margin-block: 13rem; | |
ucm-my-56 | margin-block: 14rem; | |
ucm-my-60 | margin-block: 15rem; | |
ucm-my-64 | margin-block: 16rem; | |
ucm-my-72 | margin-block: 18rem; | |
ucm-my-80 | margin-block: 20rem; | |
ucm-my-96 | margin-block: 24rem; | |
ucm-my-px | margin-block: 1px; | |
ucm-p-0 | padding: 0; | |
ucm-p-0-5 | padding: 0.125rem; | |
ucm-p-1 | padding: 0.25rem; | |
ucm-p-1-5 | padding: 0.375rem; | |
ucm-p-2 | padding: 0.5rem; | |
ucm-p-2-5 | padding: 0.625rem; | |
ucm-p-3 | padding: 0.75rem; | |
ucm-p-3-5 | padding: 0.875rem; | |
ucm-p-4 | padding: 1rem; | |
ucm-p-5 | padding: 1.25rem; | |
ucm-p-6 | padding: 1.5rem; | |
ucm-p-7 | padding: 1.75rem; | |
ucm-p-8 | padding: 2rem; | |
ucm-p-9 | padding: 2.25rem; | |
ucm-p-10 | padding: 2.5rem; | |
ucm-p-11 | padding: 2.75rem; | |
ucm-p-12 | padding: 3rem; | |
ucm-p-14 | padding: 3.5rem; | |
ucm-p-16 | padding: 4rem; | |
ucm-p-20 | padding: 5rem; | |
ucm-p-24 | padding: 6rem; | |
ucm-p-28 | padding: 7rem; | |
ucm-p-32 | padding: 8rem; | |
ucm-p-36 | padding: 9rem; | |
ucm-p-40 | padding: 10rem; | |
ucm-p-44 | padding: 11rem; | |
ucm-p-48 | padding: 12rem; | |
ucm-p-52 | padding: 13rem; | |
ucm-p-56 | padding: 14rem; | |
ucm-p-60 | padding: 15rem; | |
ucm-p-64 | padding: 16rem; | |
ucm-p-72 | padding: 18rem; | |
ucm-p-80 | padding: 20rem; | |
ucm-p-96 | padding: 24rem; | |
ucm-p-px | padding: 1px; | |
ucm-pb-0 | padding-block-end: 0; | |
ucm-pb-0-5 | padding-bottom: 0.125rem; | |
ucm-pb-1 | padding-block-end: 0.25rem; | |
ucm-pb-1-5 | padding-bottom: 0.375rem; | |
ucm-pb-2 | padding-block-end: 0.5rem; | |
ucm-pb-2-5 | padding-bottom: 0.625rem; | |
ucm-pb-3 | padding-block-end: 0.75rem; | |
ucm-pb-3-5 | padding-bottom: 0.875rem; | |
ucm-pb-4 | padding-block-end: 1rem; | |
ucm-pb-5 | padding-block-end: 1.25rem; | |
ucm-pb-6 | padding-block-end: 1.5rem; | |
ucm-pb-7 | padding-bottom: 1.75rem; | |
ucm-pb-8 | padding-block-end: 2rem; | |
ucm-pb-9 | padding-bottom: 2.25rem; | |
ucm-pb-10 | padding-block-end: 2.5rem; | |
ucm-pb-11 | padding-bottom: 2.75rem; | |
ucm-pb-12 | padding-block-end: 3rem; | |
ucm-pb-14 | padding-bottom: 3.5rem; | |
ucm-pb-16 | padding-block-end: 4rem; | |
ucm-pb-20 | padding-block-end: 5rem; | |
ucm-pb-24 | padding-bottom: 6rem; | |
ucm-pb-28 | padding-bottom: 7rem; | |
ucm-pb-32 | padding-bottom: 8rem; | |
ucm-pb-36 | padding-bottom: 9rem; | |
ucm-pb-40 | padding-bottom: 10rem; | |
ucm-pb-44 | padding-bottom: 11rem; | |
ucm-pb-48 | padding-bottom: 12rem; | |
ucm-pb-52 | padding-bottom: 13rem; | |
ucm-pb-56 | padding-bottom: 14rem; | |
ucm-pb-60 | padding-bottom: 15rem; | |
ucm-pb-64 | padding-bottom: 16rem; | |
ucm-pb-72 | padding-bottom: 18rem; | |
ucm-pb-80 | padding-bottom: 20rem; | |
ucm-pb-96 | padding-bottom: 24rem; | |
ucm-pb-px | padding-bottom: 1px; | |
ucm-pl-0 | padding-inline-start: 0; | |
ucm-pl-0-5 | padding-left: 0.125rem; | |
ucm-pl-1 | padding-inline-start: 0.25rem; | |
ucm-pl-1-5 | padding-left: 0.375rem; | |
ucm-pl-2 | padding-inline-start: 0.5rem; | |
ucm-pl-2-5 | padding-left: 0.625rem; | |
ucm-pl-3 | padding-inline-start: 0.75rem; | |
ucm-pl-3-5 | padding-left: 0.875rem; | |
ucm-pl-4 | padding-inline-start: 1rem; | |
ucm-pl-5 | padding-left: 1.25rem; | |
ucm-pl-6 | padding-inline-start: 1.5rem; | |
ucm-pl-7 | padding-left: 1.75rem; | |
ucm-pl-8 | padding-inline-start: 2rem; | |
ucm-pl-9 | padding-left: 2.25rem; | |
ucm-pl-10 | padding-left: 2.5rem; | |
ucm-pl-11 | padding-left: 2.75rem; | |
ucm-pl-12 | padding-inline-start: 3rem; | |
ucm-pl-14 | padding-left: 3.5rem; | |
ucm-pl-16 | padding-inline-start: 4rem; | |
ucm-pl-20 | padding-left: 5rem; | |
ucm-pl-24 | padding-left: 6rem; | |
ucm-pl-28 | padding-left: 7rem; | |
ucm-pl-32 | padding-left: 8rem; | |
ucm-pl-36 | padding-left: 9rem; | |
ucm-pl-40 | padding-left: 10rem; | |
ucm-pl-44 | padding-left: 11rem; | |
ucm-pl-48 | padding-left: 12rem; | |
ucm-pl-52 | padding-left: 13rem; | |
ucm-pl-56 | padding-left: 14rem; | |
ucm-pl-60 | padding-left: 15rem; | |
ucm-pl-64 | padding-left: 16rem; | |
ucm-pl-72 | padding-left: 18rem; | |
ucm-pl-80 | padding-left: 20rem; | |
ucm-pl-96 | padding-left: 24rem; | |
ucm-pl-px | padding-left: 1px; | |
ucm-pr-0 | padding-inline-end: 0; | |
ucm-pr-0-5 | padding-right: 0.125rem; | |
ucm-pr-1 | padding-inline-end: 0.25rem; | |
ucm-pr-1-5 | padding-right: 0.375rem; | |
ucm-pr-2 | padding-inline-end: 0.5rem; | |
ucm-pr-2-5 | padding-right: 0.625rem; | |
ucm-pr-3 | padding-inline-end: 0.75rem; | |
ucm-pr-3-5 | padding-right: 0.875rem; | |
ucm-pr-4 | padding-inline-end: 1rem; | |
ucm-pr-5 | padding-right: 1.25rem; | |
ucm-pr-6 | padding-inline-end: 1.5rem; | |
ucm-pr-7 | padding-right: 1.75rem; | |
ucm-pr-8 | padding-inline-end: 2rem; | |
ucm-pr-9 | padding-right: 2.25rem; | |
ucm-pr-10 | padding-right: 2.5rem; | |
ucm-pr-11 | padding-right: 2.75rem; | |
ucm-pr-12 | padding-inline-end: 3rem; | |
ucm-pr-14 | padding-right: 3.5rem; | |
ucm-pr-16 | padding-inline-end: 4rem; | |
ucm-pr-20 | padding-right: 5rem; | |
ucm-pr-24 | padding-right: 6rem; | |
ucm-pr-28 | padding-right: 7rem; | |
ucm-pr-32 | padding-right: 8rem; | |
ucm-pr-36 | padding-right: 9rem; | |
ucm-pr-40 | padding-right: 10rem; | |
ucm-pr-44 | padding-right: 11rem; | |
ucm-pr-48 | padding-right: 12rem; | |
ucm-pr-52 | padding-right: 13rem; | |
ucm-pr-56 | padding-right: 14rem; | |
ucm-pr-60 | padding-right: 15rem; | |
ucm-pr-64 | padding-right: 16rem; | |
ucm-pr-72 | padding-right: 18rem; | |
ucm-pr-80 | padding-right: 20rem; | |
ucm-pr-96 | padding-right: 24rem; | |
ucm-pr-px | padding-right: 1px; | |
ucm-pt-0 | padding-block-start: 0; | |
ucm-pt-0-5 | padding-top: 0.125rem; | |
ucm-pt-1 | padding-block-start: 0.25rem; | |
ucm-pt-1-5 | padding-top: 0.375rem; | |
ucm-pt-2 | padding-block-start: 0.5rem; | |
ucm-pt-2-5 | padding-top: 0.625rem; | |
ucm-pt-3 | padding-block-start: 0.75rem; | |
ucm-pt-3-5 | padding-top: 0.875rem; | |
ucm-pt-4 | padding-block-start: 1rem; | |
ucm-pt-5 | padding-block-start: 1.25rem; | |
ucm-pt-6 | padding-block-start: 1.5rem; | |
ucm-pt-7 | padding-top: 1.75rem; | |
ucm-pt-8 | padding-block-start: 2rem; | |
ucm-pt-9 | padding-top: 2.25rem; | |
ucm-pt-10 | padding-block-start: 2.5rem; | |
ucm-pt-11 | padding-top: 2.75rem; | |
ucm-pt-12 | padding-block-start: 3rem; | |
ucm-pt-14 | padding-top: 3.5rem; | |
ucm-pt-16 | padding-block-start: 4rem; | |
ucm-pt-20 | padding-block-start: 5rem; | |
ucm-pt-24 | padding-top: 6rem; | |
ucm-pt-28 | padding-top: 7rem; | |
ucm-pt-32 | padding-top: 8rem; | |
ucm-pt-36 | padding-top: 9rem; | |
ucm-pt-40 | padding-top: 10rem; | |
ucm-pt-44 | padding-top: 11rem; | |
ucm-pt-48 | padding-top: 12rem; | |
ucm-pt-52 | padding-top: 13rem; | |
ucm-pt-56 | padding-top: 14rem; | |
ucm-pt-60 | padding-top: 15rem; | |
ucm-pt-64 | padding-top: 16rem; | |
ucm-pt-72 | padding-top: 18rem; | |
ucm-pt-80 | padding-top: 20rem; | |
ucm-pt-96 | padding-top: 24rem; | |
ucm-pt-px | padding-top: 1px; | |
ucm-px-0 | padding-inline: 0; | |
ucm-px-0-5 | padding-inline: 0.125rem; | |
ucm-px-1 | padding-inline: 0.25rem; | |
ucm-px-1-5 | padding-inline: 0.375rem; | |
ucm-px-2 | padding-inline: 0.5rem; | |
ucm-px-2-5 | padding-inline: 0.625rem; | |
ucm-px-3 | padding-inline: 0.75rem; | |
ucm-px-3-5 | padding-inline: 0.875rem; | |
ucm-px-4 | padding-inline: 1rem; | |
ucm-px-5 | padding-inline: 1.25rem; | |
ucm-px-6 | padding-inline: 1.5rem; | |
ucm-px-7 | padding-inline: 1.75rem; | |
ucm-px-8 | padding-inline: 2rem; | |
ucm-px-9 | padding-inline: 2.25rem; | |
ucm-px-10 | padding-inline: 2.5rem; | |
ucm-px-11 | padding-inline: 2.75rem; | |
ucm-px-12 | padding-inline: 3rem; | |
ucm-px-14 | padding-inline: 3.5rem; | |
ucm-px-16 | padding-inline: 4rem; | |
ucm-px-20 | padding-inline: 5rem; | |
ucm-px-24 | padding-inline: 6rem; | |
ucm-px-28 | padding-inline: 7rem; | |
ucm-px-32 | padding-inline: 8rem; | |
ucm-px-36 | padding-inline: 9rem; | |
ucm-px-40 | padding-inline: 10rem; | |
ucm-px-44 | padding-inline: 11rem; | |
ucm-px-48 | padding-inline: 12rem; | |
ucm-px-52 | padding-inline: 13rem; | |
ucm-px-56 | padding-inline: 14rem; | |
ucm-px-60 | padding-inline: 15rem; | |
ucm-px-64 | padding-inline: 16rem; | |
ucm-px-72 | padding-inline: 18rem; | |
ucm-px-80 | padding-inline: 20rem; | |
ucm-px-96 | padding-inline: 24rem; | |
ucm-px-px | padding-inline: 1px; | |
ucm-py-0 | padding-block: 0; | |
ucm-py-0-5 | padding-block: 0.125rem; | |
ucm-py-1 | padding-block: 0.25rem; | |
ucm-py-1-5 | padding-block: 0.375rem; | |
ucm-py-2 | padding-block: 0.5rem; | |
ucm-py-2-5 | padding-block: 0.625rem; | |
ucm-py-3 | padding-block: 0.75rem; | |
ucm-py-3-5 | padding-block: 0.875rem; | |
ucm-py-4 | padding-block: 1rem; | |
ucm-py-5 | padding-block: 1.25rem; | |
ucm-py-6 | padding-block: 1.5rem; | |
ucm-py-7 | padding-block: 1.75rem; | |
ucm-py-8 | padding-block: 2rem; | |
ucm-py-9 | padding-block: 2.25rem; | |
ucm-py-10 | padding-block: 2.5rem; | |
ucm-py-11 | padding-block: 2.75rem; | |
ucm-py-12 | padding-block: 3rem; | |
ucm-py-14 | padding-block: 3.5rem; | |
ucm-py-16 | padding-block: 4rem; | |
ucm-py-20 | padding-block: 5rem; | |
ucm-py-24 | padding-block: 6rem; | |
ucm-py-28 | padding-block: 7rem; | |
ucm-py-32 | padding-block: 8rem; | |
ucm-py-36 | padding-block: 9rem; | |
ucm-py-40 | padding-block: 10rem; | |
ucm-py-44 | padding-block: 11rem; | |
ucm-py-48 | padding-block: 12rem; | |
ucm-py-52 | padding-block: 13rem; | |
ucm-py-56 | padding-block: 14rem; | |
ucm-py-60 | padding-block: 15rem; | |
ucm-py-64 | padding-block: 16rem; | |
ucm-py-72 | padding-block: 18rem; | |
ucm-py-80 | padding-block: 20rem; | |
ucm-py-96 | padding-block: 24rem; | |
ucm-py-px | padding-block: 1px; | |
ucm-right-0-5 | right: 0.125rem; | |
ucm-right-1 | right: 0.25rem; | |
ucm-right-1-2 | right: 50%; | |
ucm-right-1-3 | right: 33.333%; | |
ucm-right-1-4 | right: 25%; | |
ucm-right-2 | right: 0.5rem; | |
ucm-right-2-3 | right: 66.667%; | |
ucm-right-3 | right: 0.75rem; | |
ucm-right-3-4 | right: 75%; | |
ucm-right-4 | right: 1rem; | |
ucm-right-5 | right: 1.25rem; | |
ucm-right-6 | right: 1.5rem; | |
ucm-right-8 | right: 2rem; | |
ucm-right-10 | right: 2.5rem; | |
ucm-right-12 | right: 3rem; | |
ucm-right-16 | right: 4rem; | |
ucm-right-20 | right: 5rem; | |
ucm-right-24 | right: 6rem; | |
ucm-right-32 | right: 8rem; | |
ucm-right-40 | right: 10rem; | |
ucm-right-48 | right: 12rem; | |
ucm-right-64 | right: 16rem; | |
ucm-right-96 | right: 24rem; | |
ucm-right-auto | right: auto; | |
ucm-right-full | right: 100%; | |
ucm-right-px | right: 1px; | |
ucm-top-0-5 | top: 0.125rem; | |
ucm-top-1 | top: 0.25rem; | |
ucm-top-1-2 | top: 50%; | |
ucm-top-1-3 | top: 33.333%; | |
ucm-top-1-4 | top: 25%; | |
ucm-top-2 | top: 0.5rem; | |
ucm-top-2-3 | top: 66.667%; | |
ucm-top-3 | top: 0.75rem; | |
ucm-top-3-4 | top: 75%; | |
ucm-top-4 | top: 1rem; | |
ucm-top-5 | top: 1.25rem; | |
ucm-top-6 | top: 1.5rem; | |
ucm-top-8 | top: 2rem; | |
ucm-top-10 | top: 2.5rem; | |
ucm-top-12 | top: 3rem; | |
ucm-top-16 | top: 4rem; | |
ucm-top-20 | top: 5rem; | |
ucm-top-24 | top: 6rem; | |
ucm-top-32 | top: 8rem; | |
ucm-top-40 | top: 10rem; | |
ucm-top-48 | top: 12rem; | |
ucm-top-64 | top: 16rem; | |
ucm-top-96 | top: 24rem; | |
ucm-top-px | top: 1px; |
Sizing
227 classes
| Class | CSS | Example |
|---|---|---|
ucm-aspect-auto | aspect-ratio: auto; | |
ucm-aspect-square | aspect-ratio: 1 / 1; | |
ucm-aspect-video | aspect-ratio: 16 / 9; | |
ucm-h-0 | height: 0; | |
ucm-h-0-5 | height: 0.125rem; | |
ucm-h-1 | height: 0.25rem; | |
ucm-h-1-5 | height: 0.375rem; | |
ucm-h-2 | height: 0.5rem; | |
ucm-h-2-5 | height: 0.625rem; | |
ucm-h-3 | height: 0.75rem; | |
ucm-h-3-5 | height: 0.875rem; | |
ucm-h-4 | height: 1rem; | |
ucm-h-5 | height: 1.25rem; | |
ucm-h-6 | height: 1.5rem; | |
ucm-h-7 | height: 1.75rem; | |
ucm-h-8 | height: 2rem; | |
ucm-h-9 | height: 2.25rem; | |
ucm-h-10 | height: 2.5rem; | |
ucm-h-11 | height: 2.75rem; | |
ucm-h-12 | height: 3rem; | |
ucm-h-14 | height: 3.5rem; | |
ucm-h-16 | height: 4rem; | |
ucm-h-20 | height: 5rem; | |
ucm-h-24 | height: 6rem; | |
ucm-h-28 | height: 7rem; | |
ucm-h-32 | height: 8rem; | |
ucm-h-36 | height: 9rem; | |
ucm-h-40 | height: 10rem; | |
ucm-h-44 | height: 11rem; | |
ucm-h-48 | height: 12rem; | |
ucm-h-52 | height: 13rem; | |
ucm-h-56 | height: 14rem; | |
ucm-h-60 | height: 15rem; | |
ucm-h-64 | height: 16rem; | |
ucm-h-72 | height: 18rem; | |
ucm-h-80 | height: 20rem; | |
ucm-h-96 | height: 24rem; | |
ucm-h-auto | height: auto; | |
ucm-h-dvh | height: 100dvh; | |
ucm-h-fit | height: fit-content; | |
ucm-h-full | height: 100%; | |
ucm-h-lvh | height: 100lvh; | |
ucm-h-max | height: max-content; | |
ucm-h-min | height: min-content; | |
ucm-h-px | height: 1px; | |
ucm-h-screen | height: 100vh; | |
ucm-h-svh | height: 100svh; | |
ucm-max-h-5vh | max-height: 5vh; | |
ucm-max-h-10vh | max-height: 10vh; | |
ucm-max-h-15vh | max-height: 15vh; | |
ucm-max-h-16 | max-height: 4rem; | |
ucm-max-h-20 | max-height: 5rem; | |
ucm-max-h-20vh | max-height: 20vh; | |
ucm-max-h-24 | max-height: 6rem; | |
ucm-max-h-25vh | max-height: 25vh; | |
ucm-max-h-32 | max-height: 8rem; | |
ucm-max-h-33vh | max-height: 33.333vh; | |
ucm-max-h-40 | max-height: 10rem; | |
ucm-max-h-40vh | max-height: 40vh; | |
ucm-max-h-48 | max-height: 12rem; | |
ucm-max-h-50vh | max-height: 50vh; | |
ucm-max-h-56 | max-height: 14rem; | |
ucm-max-h-60vh | max-height: 60vh; | |
ucm-max-h-64 | max-height: 16rem; | |
ucm-max-h-72 | max-height: 18rem; | |
ucm-max-h-75vh | max-height: 75vh; | |
ucm-max-h-80 | max-height: 20rem; | |
ucm-max-h-80vh | max-height: 80vh; | |
ucm-max-h-90vh | max-height: 90vh; | |
ucm-max-h-96 | max-height: 24rem; | |
ucm-max-h-dvh | max-height: 100dvh; | |
ucm-max-h-fit | max-height: fit-content; | |
ucm-max-h-full | max-height: 100%; | |
ucm-max-h-none | max-height: none; | |
ucm-max-h-screen | max-height: 100vh; | |
ucm-max-h-svh | max-height: 100svh; | |
ucm-max-w-2xl | max-width: 42rem; | |
ucm-max-w-3xl | max-width: 48rem; | |
ucm-max-w-4xl | max-width: 56rem; | |
ucm-max-w-5xl | max-width: 64rem; | |
ucm-max-w-6xl | max-width: 72rem; | |
ucm-max-w-7xl | max-width: 80rem; | |
ucm-max-w-12 | max-width: 3rem; | |
ucm-max-w-16 | max-width: 4rem; | |
ucm-max-w-20 | max-width: 5rem; | |
ucm-max-w-24 | max-width: 6rem; | |
ucm-max-w-25vw | max-width: 25vw; | |
ucm-max-w-32 | max-width: 8rem; | |
ucm-max-w-33vw | max-width: 33.333vw; | |
ucm-max-w-40 | max-width: 10rem; | |
ucm-max-w-48 | max-width: 12rem; | |
ucm-max-w-50vw | max-width: 50vw; | |
ucm-max-w-56 | max-width: 14rem; | |
ucm-max-w-64 | max-width: 16rem; | |
ucm-max-w-72 | max-width: 18rem; | |
ucm-max-w-75vw | max-width: 75vw; | |
ucm-max-w-80 | max-width: 20rem; | |
ucm-max-w-80vw | max-width: 80vw; | |
ucm-max-w-90vw | max-width: 90vw; | |
ucm-max-w-96 | max-width: 24rem; | |
ucm-max-w-112 | max-width: 28rem; | |
ucm-max-w-128 | max-width: 32rem; | |
ucm-max-w-144 | max-width: 36rem; | |
ucm-max-w-160 | max-width: 40rem; | |
ucm-max-w-fit | max-width: fit-content; | |
ucm-max-w-full | max-width: 100%; | |
ucm-max-w-lg | max-width: 1024px; | |
ucm-max-w-max | max-width: max-content; | |
ucm-max-w-md | max-width: 768px; | |
ucm-max-w-min | max-width: min-content; | |
ucm-max-w-none | max-width: none; | |
ucm-max-w-prose | max-width: 65ch; | |
ucm-max-w-screen | max-width: 100vw; | |
ucm-max-w-sm | max-width: 640px; | |
ucm-max-w-xl | max-width: 1280px; | |
ucm-max-w-xs | max-width: 20rem; | |
ucm-min-h-0 | min-height: 0; | |
ucm-min-h-5vh | min-height: 5vh; | |
ucm-min-h-10vh | min-height: 10vh; | |
ucm-min-h-15vh | min-height: 15vh; | |
ucm-min-h-16 | min-height: 4rem; | |
ucm-min-h-20 | min-height: 5rem; | |
ucm-min-h-20vh | min-height: 20vh; | |
ucm-min-h-24 | min-height: 6rem; | |
ucm-min-h-25vh | min-height: 25vh; | |
ucm-min-h-32 | min-height: 8rem; | |
ucm-min-h-33vh | min-height: 33.333vh; | |
ucm-min-h-40 | min-height: 10rem; | |
ucm-min-h-40vh | min-height: 40vh; | |
ucm-min-h-48 | min-height: 12rem; | |
ucm-min-h-50vh | min-height: 50vh; | |
ucm-min-h-56 | min-height: 14rem; | |
ucm-min-h-60vh | min-height: 60vh; | |
ucm-min-h-64 | min-height: 16rem; | |
ucm-min-h-72 | min-height: 18rem; | |
ucm-min-h-75vh | min-height: 75vh; | |
ucm-min-h-80 | min-height: 20rem; | |
ucm-min-h-80vh | min-height: 80vh; | |
ucm-min-h-90vh | min-height: 90vh; | |
ucm-min-h-96 | min-height: 24rem; | |
ucm-min-h-dvh | min-height: 100dvh; | |
ucm-min-h-fit | min-height: fit-content; | |
ucm-min-h-full | min-height: 100%; | |
ucm-min-h-screen | min-height: 100vh; | |
ucm-min-h-svh | min-height: 100svh; | |
ucm-min-w-0 | min-width: 0; | |
ucm-min-w-8 | min-width: 2rem; | |
ucm-min-w-12 | min-width: 3rem; | |
ucm-min-w-16 | min-width: 4rem; | |
ucm-min-w-20 | min-width: 5rem; | |
ucm-min-w-24 | min-width: 6rem; | |
ucm-min-w-25vw | min-width: 25vw; | |
ucm-min-w-32 | min-width: 8rem; | |
ucm-min-w-33vw | min-width: 33.333vw; | |
ucm-min-w-40 | min-width: 10rem; | |
ucm-min-w-48 | min-width: 12rem; | |
ucm-min-w-50vw | min-width: 50vw; | |
ucm-min-w-64 | min-width: 16rem; | |
ucm-min-w-75vw | min-width: 75vw; | |
ucm-min-w-80 | min-width: 20rem; | |
ucm-min-w-90vw | min-width: 90vw; | |
ucm-min-w-96 | min-width: 24rem; | |
ucm-min-w-fit | min-width: fit-content; | |
ucm-min-w-full | min-width: 100%; | |
ucm-min-w-max | min-width: max-content; | |
ucm-min-w-min | min-width: min-content; | |
ucm-object-bottom | object-position: bottom; | |
ucm-object-center | object-position: center; | |
ucm-object-contain | object-fit: contain; | |
ucm-object-cover | object-fit: cover; | |
ucm-object-fill | object-fit: fill; | |
ucm-object-left | object-position: left; | |
ucm-object-none | object-fit: none; | |
ucm-object-right | object-position: right; | |
ucm-object-scale-down | object-fit: scale-down; | |
ucm-object-top | object-position: top; | |
ucm-w-0 | width: 0; | |
ucm-w-0-5 | width: 0.125rem; | |
ucm-w-1 | width: 0.25rem; | |
ucm-w-1-2 | width: 50%; | |
ucm-w-1-3 | width: 33.333%; | |
ucm-w-1-4 | width: 25%; | |
ucm-w-1-5 | width: 0.375rem; | |
ucm-w-1-6 | width: 16.667%; | |
ucm-w-2 | width: 0.5rem; | |
ucm-w-2-3 | width: 66.667%; | |
ucm-w-2-5 | width: 0.625rem; | |
ucm-w-3 | width: 0.75rem; | |
ucm-w-3-4 | width: 75%; | |
ucm-w-3-5 | width: 0.875rem; | |
ucm-w-4 | width: 1rem; | |
ucm-w-4-5 | width: 80%; | |
ucm-w-5 | width: 1.25rem; | |
ucm-w-5-6 | width: 83.333%; | |
ucm-w-6 | width: 1.5rem; | |
ucm-w-7 | width: 1.75rem; | |
ucm-w-8 | width: 2rem; | |
ucm-w-9 | width: 2.25rem; | |
ucm-w-10 | width: 2.5rem; | |
ucm-w-11 | width: 2.75rem; | |
ucm-w-12 | width: 3rem; | |
ucm-w-14 | width: 3.5rem; | |
ucm-w-16 | width: 4rem; | |
ucm-w-20 | width: 5rem; | |
ucm-w-24 | width: 6rem; | |
ucm-w-28 | width: 7rem; | |
ucm-w-32 | width: 8rem; | |
ucm-w-36 | width: 9rem; | |
ucm-w-40 | width: 10rem; | |
ucm-w-44 | width: 11rem; | |
ucm-w-48 | width: 12rem; | |
ucm-w-52 | width: 13rem; | |
ucm-w-56 | width: 14rem; | |
ucm-w-60 | width: 15rem; | |
ucm-w-64 | width: 16rem; | |
ucm-w-72 | width: 18rem; | |
ucm-w-80 | width: 20rem; | |
ucm-w-96 | width: 24rem; | |
ucm-w-auto | width: auto; | |
ucm-w-dvw | width: 100dvw; | |
ucm-w-fit | width: fit-content; | |
ucm-w-full | width: 100%; | |
ucm-w-max | width: max-content; | |
ucm-w-min | width: min-content; | |
ucm-w-px | width: 1px; | |
ucm-w-screen | width: 100vw; | |
ucm-w-svw | width: 100svw; |
Typography
116 classes
| Class | CSS | Example |
|---|---|---|
ucm-align-baseline | vertical-align: baseline; | |
ucm-align-bottom | vertical-align: bottom; | |
ucm-align-middle | vertical-align: middle; | |
ucm-align-text-bottom | vertical-align: text-bottom; | |
ucm-align-text-top | vertical-align: text-top; | |
ucm-align-top | vertical-align: top; | |
ucm-break-all | word-break: break-all; | |
ucm-break-keep | word-break: keep-all; | |
ucm-break-normal | overflow-wrap: normal; | |
ucm-break-words | overflow-wrap: break-word; | |
ucm-capitalize | text-transform: capitalize; | Ag |
ucm-decoration-dashed | text-decoration-style: dashed; | |
ucm-decoration-dotted | text-decoration-style: dotted; | |
ucm-decoration-solid | text-decoration-style: solid; | |
ucm-decoration-wavy | text-decoration-style: wavy; | |
ucm-font-black | font-weight: 900; | Ag |
ucm-font-bold | font-weight: 700; | Ag |
ucm-font-extrabold | font-weight: 800; | Ag |
ucm-font-light | font-weight: 300; | Ag |
ucm-font-medium | font-weight: 500; | Ag |
ucm-font-normal | font-weight: 400; | Ag |
ucm-font-semibold | font-weight: 600; | Ag |
ucm-font-thin | font-weight: 100; | Ag |
ucm-indent-1 | text-indent: 0.25rem; | |
ucm-indent-2 | text-indent: 0.5rem; | |
ucm-indent-4 | text-indent: 1rem; | |
ucm-indent-8 | text-indent: 2rem; | |
ucm-indent-16 | text-indent: 4rem; | |
ucm-italic | font-style: italic; | Ag |
ucm-leading-3 | line-height: 0.75rem; | Ag |
ucm-leading-4 | line-height: 1rem; | Ag |
ucm-leading-5 | line-height: 1.25rem; | Ag |
ucm-leading-6 | line-height: 1.5rem; | Ag |
ucm-leading-7 | line-height: 1.75rem; | Ag |
ucm-leading-8 | line-height: 2rem; | Ag |
ucm-leading-9 | line-height: 2.25rem; | Ag |
ucm-leading-10 | line-height: 2.5rem; | Ag |
ucm-leading-loose | line-height: 2; | Ag |
ucm-leading-none | line-height: 1; | Ag |
ucm-leading-normal | line-height: 1.5; | Ag |
ucm-leading-relaxed | line-height: 1.625; | Ag |
ucm-leading-snug | line-height: 1.375; | Ag |
ucm-leading-tight | line-height: 1.25; | Ag |
ucm-line-through | text-decoration-line: line-through; | Ag |
ucm-list-decimal | list-style-type: decimal; | |
ucm-list-disc | list-style-type: disc; | |
ucm-list-none | list-style-type: none; | |
ucm-lowercase | text-transform: lowercase; | Ag |
ucm-no-underline | text-decoration-line: none; | Ag |
ucm-normal-case | text-transform: none; | Ag |
ucm-not-italic | font-style: normal; | Ag |
ucm-text-2xl | font-size: 1.5rem; | Ag |
ucm-text-3xl | font-size: 1.875rem; | Ag |
ucm-text-4xl | font-size: 2.25rem; | Ag |
ucm-text-5xl | font-size: 3rem; | Ag |
ucm-text-6xl | font-size: 3.75rem; | Ag |
ucm-text-7xl | font-size: 4.5rem; | Ag |
ucm-text-8xl | font-size: 6rem; | Ag |
ucm-text-9xl | font-size: 8rem; | Ag |
ucm-text-balance | text-wrap: balance; | |
ucm-text-base | font-size: 1rem; | Ag |
ucm-text-black | color: #000000; | |
ucm-text-black-05 | color: rgba(0,0,0,.05); | |
ucm-text-black-08 | color: rgba(0,0,0,.08); | |
ucm-text-black-10 | color: rgba(0,0,0,.10); | |
ucm-text-black-15 | color: rgba(0,0,0,.15); | |
ucm-text-black-20 | color: rgba(0,0,0,.20); | |
ucm-text-black-25 | color: rgba(0,0,0,.25); | |
ucm-text-black-30 | color: rgba(0,0,0,.30); | |
ucm-text-black-40 | color: rgba(0,0,0,.40); | |
ucm-text-black-50 | color: rgba(0,0,0,.50); | |
ucm-text-black-60 | color: rgba(0,0,0,.60); | |
ucm-text-black-70 | color: rgba(0,0,0,.70); | |
ucm-text-black-80 | color: rgba(0,0,0,.80); | |
ucm-text-center | text-align: center; | |
ucm-text-clip | text-overflow: clip; | |
ucm-text-current | color: currentColor; | |
ucm-text-ellipsis | text-overflow: ellipsis; | |
ucm-text-inherit | color: inherit; | |
ucm-text-justify | text-align: justify; | |
ucm-text-left | text-align: left; | |
ucm-text-lg | font-size: 1.125rem; | Ag |
ucm-text-nowrap | text-wrap: nowrap; | |
ucm-text-pretty | text-wrap: pretty; | |
ucm-text-right | text-align: right; | |
ucm-text-sm | font-size: 0.875rem; | Ag |
ucm-text-white | color: #ffffff; | |
ucm-text-white-05 | color: rgba(255,255,255,.05); | |
ucm-text-white-08 | color: rgba(255,255,255,.08); | |
ucm-text-white-10 | color: rgba(255,255,255,.10); | |
ucm-text-white-15 | color: rgba(255,255,255,.15); | |
ucm-text-white-20 | color: rgba(255,255,255,.20); | |
ucm-text-white-25 | color: rgba(255,255,255,.25); | |
ucm-text-white-30 | color: rgba(255,255,255,.30); | |
ucm-text-white-40 | color: rgba(255,255,255,.40); | |
ucm-text-white-50 | color: rgba(255,255,255,.50); | |
ucm-text-white-60 | color: rgba(255,255,255,.60); | |
ucm-text-white-70 | color: rgba(255,255,255,.70); | |
ucm-text-white-80 | color: rgba(255,255,255,.80); | |
ucm-text-wrap | text-wrap: wrap; | |
ucm-text-xl | font-size: 1.25rem; | Ag |
ucm-text-xs | font-size: 0.75rem; | Ag |
ucm-tracking-normal | letter-spacing: 0; | Ag |
ucm-tracking-tight | letter-spacing: -0.025em; | Ag |
ucm-tracking-tighter | letter-spacing: -0.05em; | Ag |
ucm-tracking-wide | letter-spacing: 0.025em; | Ag |
ucm-tracking-wider | letter-spacing: 0.05em; | Ag |
ucm-tracking-widest | letter-spacing: 0.1em; | Ag |
ucm-underline | text-decoration-line: underline; | Ag |
ucm-uppercase | text-transform: uppercase; | Ag |
ucm-whitespace-break-spaces | white-space: break-spaces; | |
ucm-whitespace-normal | white-space: normal; | |
ucm-whitespace-nowrap | white-space: nowrap; | |
ucm-whitespace-pre | white-space: pre; | |
ucm-whitespace-pre-line | white-space: pre-line; | |
ucm-whitespace-pre-wrap | white-space: pre-wrap; |
Display
7 classes
| Class | CSS | Example |
|---|---|---|
ucm-collapse | visibility: collapse; | |
ucm-flow-root | display: flow-root; | |
ucm-invisible | visibility: hidden; | |
ucm-isolate | isolation: isolate; | |
ucm-isolation-auto | isolation: auto; | |
ucm-table-row | display: table-row; | |
ucm-visible | visibility: visible; |
Flexbox
69 classes
| Class | CSS | Example |
|---|---|---|
ucm-basis-1-2 | flex-basis: 50%; | |
ucm-basis-1-3 | flex-basis: 33.333%; | |
ucm-basis-1-4 | flex-basis: 25%; | |
ucm-basis-2-3 | flex-basis: 66.667%; | |
ucm-basis-3-4 | flex-basis: 75%; | |
ucm-basis-auto | flex-basis: auto; | |
ucm-basis-full | flex-basis: 100%; | |
ucm-block | display: block; | |
ucm-contents | display: contents; | |
ucm-flex | display: flex; | |
ucm-flex-1 | flex: 1 1 0%; | |
ucm-flex-auto | flex: 1 1 auto; | |
ucm-flex-col | flex-direction: column; | |
ucm-flex-col-rev | flex-direction: column-reverse; | |
ucm-flex-grow | flex-grow: 1; | |
ucm-flex-grow-0 | flex-grow: 0; | |
ucm-flex-none | flex: none; | |
ucm-flex-nowrap | flex-wrap: nowrap; | |
ucm-flex-row | flex-direction: row; | |
ucm-flex-row-rev | flex-direction: row-reverse; | |
ucm-flex-shrink | flex-shrink: 1; | |
ucm-flex-shrink-0 | flex-shrink: 0; | |
ucm-flex-wrap | flex-wrap: wrap; | |
ucm-flex-wrap-reverse | flex-wrap: wrap-reverse; | |
ucm-grid | display: grid; | |
ucm-grow | flex-grow: 1; | |
ucm-grow-0 | flex-grow: 0; | |
ucm-hidden | display: none; | |
ucm-inline | display: inline; | |
ucm-inline-block | display: inline-block; | |
ucm-inline-flex | display: inline-flex; | |
ucm-inline-grid | display: inline-grid; | |
ucm-items-baseline | align-items: baseline; | |
ucm-items-center | align-items: center; | |
ucm-items-end | align-items: flex-end; | |
ucm-items-start | align-items: flex-start; | |
ucm-items-stretch | align-items: stretch; | |
ucm-justify-around | justify-content: space-around; | |
ucm-justify-between | justify-content: space-between; | |
ucm-justify-center | justify-content: center; | |
ucm-justify-end | justify-content: flex-end; | |
ucm-justify-evenly | justify-content: space-evenly; | |
ucm-justify-start | justify-content: flex-start; | |
ucm-order-1 | order: 1; | |
ucm-order-2 | order: 2; | |
ucm-order-3 | order: 3; | |
ucm-order-4 | order: 4; | |
ucm-order-5 | order: 5; | |
ucm-order-6 | order: 6; | |
ucm-order-7 | order: 7; | |
ucm-order-8 | order: 8; | |
ucm-order-9 | order: 9; | |
ucm-order-10 | order: 10; | |
ucm-order-11 | order: 11; | |
ucm-order-12 | order: 12; | |
ucm-order-first | order: -9999; | |
ucm-order-last | order: 9999; | |
ucm-order-none | order: 0; | |
ucm-place-content-center | place-content: center; | |
ucm-place-items-center | place-items: center; | |
ucm-self-auto | align-self: auto; | |
ucm-self-center | align-self: center; | |
ucm-self-end | align-self: flex-end; | |
ucm-self-start | align-self: flex-start; | |
ucm-self-stretch | align-self: stretch; | |
ucm-shrink | flex-shrink: 1; | |
ucm-shrink-0 | flex-shrink: 0; | |
ucm-table | display: table; | |
ucm-table-cell | display: table-cell; |
Grid
118 classes
| Class | CSS | Example |
|---|---|---|
ucm-auto-cols-auto | grid-auto-columns: auto; | |
ucm-auto-cols-fr | grid-auto-columns: minmax(0,1fr); | |
ucm-auto-cols-max | grid-auto-columns: max; | |
ucm-auto-cols-min | grid-auto-columns: min; | |
ucm-auto-rows-auto | grid-auto-rows: auto; | |
ucm-auto-rows-fr | grid-auto-rows: minmax(0,1fr); | |
ucm-auto-rows-max | grid-auto-rows: max; | |
ucm-auto-rows-min | grid-auto-rows: min; | |
ucm-col-end-1 | grid-column-end: 1; | |
ucm-col-end-2 | grid-column-end: 2; | |
ucm-col-end-3 | grid-column-end: 3; | |
ucm-col-end-4 | grid-column-end: 4; | |
ucm-col-end-5 | grid-column-end: 5; | |
ucm-col-end-6 | grid-column-end: 6; | |
ucm-col-end-7 | grid-column-end: 7; | |
ucm-col-end-8 | grid-column-end: 8; | |
ucm-col-end-9 | grid-column-end: 9; | |
ucm-col-end-10 | grid-column-end: 10; | |
ucm-col-end-11 | grid-column-end: 11; | |
ucm-col-end-12 | grid-column-end: 12; | |
ucm-col-end-13 | grid-column-end: 13; | |
ucm-col-end-auto | grid-column-end: auto; | |
ucm-col-span-1 | grid-column: span 1 / span 1; | |
ucm-col-span-2 | grid-column: span 2 / span 2; | |
ucm-col-span-3 | grid-column: span 3 / span 3; | |
ucm-col-span-4 | grid-column: span 4 / span 4; | |
ucm-col-span-5 | grid-column: span 5 / span 5; | |
ucm-col-span-6 | grid-column: span 6 / span 6; | |
ucm-col-span-7 | grid-column: span 7 / span 7; | |
ucm-col-span-8 | grid-column: span 8 / span 8; | |
ucm-col-span-9 | grid-column: span 9 / span 9; | |
ucm-col-span-10 | grid-column: span 10 / span 10; | |
ucm-col-span-11 | grid-column: span 11 / span 11; | |
ucm-col-span-12 | grid-column: span 12 / span 12; | |
ucm-col-span-full | grid-column: 1 / -1; | |
ucm-col-start-1 | grid-column-start: 1; | |
ucm-col-start-2 | grid-column-start: 2; | |
ucm-col-start-3 | grid-column-start: 3; | |
ucm-col-start-4 | grid-column-start: 4; | |
ucm-col-start-5 | grid-column-start: 5; | |
ucm-col-start-6 | grid-column-start: 6; | |
ucm-col-start-7 | grid-column-start: 7; | |
ucm-col-start-8 | grid-column-start: 8; | |
ucm-col-start-9 | grid-column-start: 9; | |
ucm-col-start-10 | grid-column-start: 10; | |
ucm-col-start-11 | grid-column-start: 11; | |
ucm-col-start-12 | grid-column-start: 12; | |
ucm-col-start-13 | grid-column-start: 13; | |
ucm-col-start-auto | grid-column-start: auto; | |
ucm-content-around | align-content: space-around; | |
ucm-content-between | align-content: space-between; | |
ucm-content-center | align-content: center; | |
ucm-content-end | align-content: flex-end; | |
ucm-content-start | align-content: flex-start; | |
ucm-grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | |
ucm-grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | |
ucm-grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | |
ucm-grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); | |
ucm-grid-cols-5 | grid-template-columns: repeat(5,minmax(0,1fr)); | |
ucm-grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); | |
ucm-grid-cols-7 | grid-template-columns: repeat(7,minmax(0,1fr)); | |
ucm-grid-cols-8 | grid-template-columns: repeat(8,minmax(0,1fr)); | |
ucm-grid-cols-9 | grid-template-columns: repeat(9,minmax(0,1fr)); | |
ucm-grid-cols-10 | grid-template-columns: repeat(10,minmax(0,1fr)); | |
ucm-grid-cols-11 | grid-template-columns: repeat(11,minmax(0,1fr)); | |
ucm-grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); | |
ucm-grid-cols-none | grid-template-columns: none; | |
ucm-grid-flow-col | grid-auto-flow: column; | |
ucm-grid-flow-col-dense | grid-auto-flow: column dense; | |
ucm-grid-flow-dense | grid-auto-flow: dense; | |
ucm-grid-flow-row | grid-auto-flow: row; | |
ucm-grid-flow-row-dense | grid-auto-flow: row dense; | |
ucm-grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); | |
ucm-grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); | |
ucm-grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); | |
ucm-grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); | |
ucm-grid-rows-5 | grid-template-rows: repeat(5,minmax(0,1fr)); | |
ucm-grid-rows-6 | grid-template-rows: repeat(6,minmax(0,1fr)); | |
ucm-grid-rows-none | grid-template-rows: none; | |
ucm-justify-items-center | justify-items: center; | |
ucm-justify-items-end | justify-items: end; | |
ucm-justify-items-start | justify-items: start; | |
ucm-justify-items-stretch | justify-items: stretch; | |
ucm-row-end-1 | grid-row-end: 1; | |
ucm-row-end-2 | grid-row-end: 2; | |
ucm-row-end-3 | grid-row-end: 3; | |
ucm-row-end-4 | grid-row-end: 4; | |
ucm-row-end-5 | grid-row-end: 5; | |
ucm-row-end-6 | grid-row-end: 6; | |
ucm-row-end-7 | grid-row-end: 7; | |
ucm-row-end-8 | grid-row-end: 8; | |
ucm-row-end-9 | grid-row-end: 9; | |
ucm-row-end-10 | grid-row-end: 10; | |
ucm-row-end-11 | grid-row-end: 11; | |
ucm-row-end-12 | grid-row-end: 12; | |
ucm-row-end-13 | grid-row-end: 13; | |
ucm-row-end-auto | grid-row-end: auto; | |
ucm-row-span-1 | grid-row: span 1 / span 1; | |
ucm-row-span-2 | grid-row: span 2 / span 2; | |
ucm-row-span-3 | grid-row: span 3 / span 3; | |
ucm-row-span-4 | grid-row: span 4 / span 4; | |
ucm-row-span-5 | grid-row: span 5 / span 5; | |
ucm-row-span-6 | grid-row: span 6 / span 6; | |
ucm-row-span-full | grid-row: 1 / -1; | |
ucm-row-start-1 | grid-row-start: 1; | |
ucm-row-start-2 | grid-row-start: 2; | |
ucm-row-start-3 | grid-row-start: 3; | |
ucm-row-start-4 | grid-row-start: 4; | |
ucm-row-start-5 | grid-row-start: 5; | |
ucm-row-start-6 | grid-row-start: 6; | |
ucm-row-start-7 | grid-row-start: 7; | |
ucm-row-start-8 | grid-row-start: 8; | |
ucm-row-start-9 | grid-row-start: 9; | |
ucm-row-start-10 | grid-row-start: 10; | |
ucm-row-start-11 | grid-row-start: 11; | |
ucm-row-start-12 | grid-row-start: 12; | |
ucm-row-start-13 | grid-row-start: 13; | |
ucm-row-start-auto | grid-row-start: auto; |
Position
47 classes
| Class | CSS | Example |
|---|---|---|
ucm-absolute | position: absolute; | |
ucm-bottom-0 | bottom: 0; | |
ucm-bottom-0-5 | bottom: 0.125rem; | |
ucm-bottom-1 | bottom: 0.25rem; | |
ucm-bottom-1-2 | bottom: 50%; | |
ucm-bottom-1-3 | bottom: 33.333%; | |
ucm-bottom-1-4 | bottom: 25%; | |
ucm-bottom-2 | bottom: 0.5rem; | |
ucm-bottom-2-3 | bottom: 66.667%; | |
ucm-bottom-3 | bottom: 0.75rem; | |
ucm-bottom-3-4 | bottom: 75%; | |
ucm-bottom-4 | bottom: 1rem; | |
ucm-bottom-5 | bottom: 1.25rem; | |
ucm-bottom-6 | bottom: 1.5rem; | |
ucm-bottom-8 | bottom: 2rem; | |
ucm-bottom-10 | bottom: 2.5rem; | |
ucm-bottom-12 | bottom: 3rem; | |
ucm-bottom-16 | bottom: 4rem; | |
ucm-bottom-20 | bottom: 5rem; | |
ucm-bottom-24 | bottom: 6rem; | |
ucm-bottom-32 | bottom: 8rem; | |
ucm-bottom-40 | bottom: 10rem; | |
ucm-bottom-48 | bottom: 12rem; | |
ucm-bottom-64 | bottom: 16rem; | |
ucm-bottom-96 | bottom: 24rem; | |
ucm-bottom-auto | bottom: auto; | |
ucm-bottom-full | bottom: 100%; | |
ucm-bottom-px | bottom: 1px; | |
ucm-fixed | position: fixed; | |
ucm-inset-0 | inset: 0; | |
ucm-inset-auto | inset: auto; | |
ucm-inset-full | inset: 100%; | |
ucm-inset-px | inset: 1px; | |
ucm-left-0 | left: 0; | |
ucm-relative | position: relative; | |
ucm-right-0 | right: 0; | |
ucm-sticky | position: sticky; | |
ucm-top-0 | top: 0; | |
ucm-top-auto | top: auto; | |
ucm-top-full | top: 100%; | |
ucm-z-0 | z-index: 0; | |
ucm-z-10 | z-index: 10; | |
ucm-z-20 | z-index: 20; | |
ucm-z-30 | z-index: 30; | |
ucm-z-40 | z-index: 40; | |
ucm-z-50 | z-index: 50; | |
ucm-z-auto | z-index: auto; |
Background
48 classes
| Class | CSS | Example |
|---|---|---|
ucm-bg-auto | background-size: auto; | |
ucm-bg-black | background-color: #000000; | |
ucm-bg-black-05 | background-color: rgba(0,0,0,.05); | |
ucm-bg-black-08 | background-color: rgba(0,0,0,.08); | |
ucm-bg-black-10 | background-color: rgba(0,0,0,.10); | |
ucm-bg-black-15 | background-color: rgba(0,0,0,.15); | |
ucm-bg-black-20 | background-color: rgba(0,0,0,.20); | |
ucm-bg-black-25 | background-color: rgba(0,0,0,.25); | |
ucm-bg-black-30 | background-color: rgba(0,0,0,.30); | |
ucm-bg-black-40 | background-color: rgba(0,0,0,.40); | |
ucm-bg-black-50 | background-color: rgba(0,0,0,.50); | |
ucm-bg-black-60 | background-color: rgba(0,0,0,.60); | |
ucm-bg-black-70 | background-color: rgba(0,0,0,.70); | |
ucm-bg-black-80 | background-color: rgba(0,0,0,.80); | |
ucm-bg-bottom | background-position: bottom; | |
ucm-bg-center | background-position: center; | |
ucm-bg-clip-border | background-clip: border-box; | |
ucm-bg-clip-content | background-clip: content-box; | |
ucm-bg-clip-padding | background-clip: padding-box; | |
ucm-bg-clip-text | background-clip: text; | |
ucm-bg-contain | background-size: contain; | |
ucm-bg-cover | background-size: cover; | |
ucm-bg-fixed | background-attachment: fixed; | |
ucm-bg-left | background-position: left; | |
ucm-bg-local | background-attachment: local; | |
ucm-bg-no-repeat | background-repeat: no-repeat; | |
ucm-bg-origin-border | background-origin: border-box; | |
ucm-bg-origin-content | background-origin: content-box; | |
ucm-bg-origin-padding | background-origin: padding-box; | |
ucm-bg-repeat | background-repeat: repeat; | |
ucm-bg-repeat-x | background-repeat: repeat-x; | |
ucm-bg-repeat-y | background-repeat: repeat-y; | |
ucm-bg-right | background-position: right; | |
ucm-bg-scroll | background-attachment: scroll; | |
ucm-bg-top | background-position: top; | |
ucm-bg-transparent | background-color: transparent; | |
ucm-bg-white | background-color: #ffffff; | |
ucm-bg-white-08 | background-color: rgba(255,255,255,.08); | |
ucm-bg-white-10 | background-color: rgba(255,255,255,.10); | |
ucm-bg-white-15 | background-color: rgba(255,255,255,.15); | |
ucm-bg-white-20 | background-color: rgba(255,255,255,.20); | |
ucm-bg-white-25 | background-color: rgba(255,255,255,.25); | |
ucm-bg-white-30 | background-color: rgba(255,255,255,.30); | |
ucm-bg-white-40 | background-color: rgba(255,255,255,.40); | |
ucm-bg-white-50 | background-color: rgba(255,255,255,.50); | |
ucm-bg-white-60 | background-color: rgba(255,255,255,.60); | |
ucm-bg-white-70 | background-color: rgba(255,255,255,.70); | |
ucm-bg-white-80 | background-color: rgba(255,255,255,.80); |
Border
95 classes
| Class | CSS | Example |
|---|---|---|
ucm-border | border-width: 1px; | |
ucm-border-0 | border-width: 0; | |
ucm-border-2 | border-width: 2px; | |
ucm-border-4 | border-width: 4px; | |
ucm-border-8 | border-width: 8px; | |
ucm-border-b | border-bottom-width: 1px; | |
ucm-border-b-0 | border-bottom-width: 0; | |
ucm-border-b-2 | border-bottom-width: 2px; | |
ucm-border-b-4 | border-bottom-width: 4px; | |
ucm-border-black | border-color: #000; | |
ucm-border-black-05 | border-color: rgba(0,0,0,.05); | |
ucm-border-black-08 | border-color: rgba(0,0,0,.08); | |
ucm-border-black-10 | border-color: rgba(0,0,0,.10); | |
ucm-border-black-15 | border-color: rgba(0,0,0,.15); | |
ucm-border-black-20 | border-color: rgba(0,0,0,.20); | |
ucm-border-black-25 | border-color: rgba(0,0,0,.25); | |
ucm-border-black-30 | border-color: rgba(0,0,0,.30); | |
ucm-border-black-40 | border-color: rgba(0,0,0,.40); | |
ucm-border-black-50 | border-color: rgba(0,0,0,.50); | |
ucm-border-black-60 | border-color: rgba(0,0,0,.60); | |
ucm-border-black-70 | border-color: rgba(0,0,0,.70); | |
ucm-border-black-80 | border-color: rgba(0,0,0,.80); | |
ucm-border-collapse | border-collapse: collapse; | |
ucm-border-current | border-color: currentColor; | |
ucm-border-dashed | border-style: dashed; | |
ucm-border-dotted | border-style: dotted; | |
ucm-border-double | border-style: double; | |
ucm-border-l | border-left-width: 1px; | |
ucm-border-l-0 | border-left-width: 0; | |
ucm-border-l-2 | border-left-width: 2px; | |
ucm-border-l-4 | border-left-width: 4px; | |
ucm-border-none | border-style: none; | |
ucm-border-r | border-right-width: 1px; | |
ucm-border-r-0 | border-right-width: 0; | |
ucm-border-r-2 | border-right-width: 2px; | |
ucm-border-r-4 | border-right-width: 4px; | |
ucm-border-separate | border-collapse: separate; | |
ucm-border-solid | border-style: solid; | |
ucm-border-t | border-top-width: 1px; | |
ucm-border-t-0 | border-top-width: 0; | |
ucm-border-t-2 | border-top-width: 2px; | |
ucm-border-t-4 | border-top-width: 4px; | |
ucm-border-transparent | border-color: transparent; | |
ucm-border-white | border-color: #fff; | |
ucm-border-white-05 | border-color: rgba(255,255,255,.05); | |
ucm-border-white-10 | border-color: rgba(255,255,255,.10); | |
ucm-border-white-15 | border-color: rgba(255,255,255,.15); | |
ucm-border-white-20 | border-color: rgba(255,255,255,.20); | |
ucm-border-white-25 | border-color: rgba(255,255,255,.25); | |
ucm-border-white-30 | border-color: rgba(255,255,255,.30); | |
ucm-border-white-40 | border-color: rgba(255,255,255,.40); | |
ucm-border-white-50 | border-color: rgba(255,255,255,.50); | |
ucm-border-white-60 | border-color: rgba(255,255,255,.60); | |
ucm-border-white-70 | border-color: rgba(255,255,255,.70); | |
ucm-border-white-80 | border-color: rgba(255,255,255,.80); | |
ucm-rounded | border-radius: 0.25rem; | |
ucm-rounded-2xl | border-radius: 1rem; | |
ucm-rounded-bl | border-bottom-left-radius: 0.25rem; | |
ucm-rounded-bl-2xl | border-bottom-left-radius: 1rem; | |
ucm-rounded-bl-3xl | border-bottom-left-radius: 1.5rem; | |
ucm-rounded-bl-full | border-bottom-left-radius: 9999px; | |
ucm-rounded-bl-lg | border-bottom-left-radius: 0.5rem; | |
ucm-rounded-bl-md | border-bottom-left-radius: 0.375rem; | |
ucm-rounded-bl-sm | border-bottom-left-radius: 0.125rem; | |
ucm-rounded-bl-xl | border-bottom-left-radius: 0.75rem; | |
ucm-rounded-br | border-bottom-right-radius: 0.25rem; | |
ucm-rounded-br-2xl | border-bottom-right-radius: 1rem; | |
ucm-rounded-br-3xl | border-bottom-right-radius: 1.5rem; | |
ucm-rounded-br-full | border-bottom-right-radius: 9999px; | |
ucm-rounded-br-lg | border-bottom-right-radius: 0.5rem; | |
ucm-rounded-br-md | border-bottom-right-radius: 0.375rem; | |
ucm-rounded-br-sm | border-bottom-right-radius: 0.125rem; | |
ucm-rounded-br-xl | border-bottom-right-radius: 0.75rem; | |
ucm-rounded-full | border-radius: 9999px; | |
ucm-rounded-lg | border-radius: 0.5rem; | |
ucm-rounded-md | border-radius: 0.375rem; | |
ucm-rounded-none | border-radius: 0; | |
ucm-rounded-sm | border-radius: 0.125rem; | |
ucm-rounded-tl | border-top-left-radius: 0.25rem; | |
ucm-rounded-tl-2xl | border-top-left-radius: 1rem; | |
ucm-rounded-tl-3xl | border-top-left-radius: 1.5rem; | |
ucm-rounded-tl-full | border-top-left-radius: 9999px; | |
ucm-rounded-tl-lg | border-top-left-radius: 0.5rem; | |
ucm-rounded-tl-md | border-top-left-radius: 0.375rem; | |
ucm-rounded-tl-sm | border-top-left-radius: 0.125rem; | |
ucm-rounded-tl-xl | border-top-left-radius: 0.75rem; | |
ucm-rounded-tr | border-top-right-radius: 0.25rem; | |
ucm-rounded-tr-2xl | border-top-right-radius: 1rem; | |
ucm-rounded-tr-3xl | border-top-right-radius: 1.5rem; | |
ucm-rounded-tr-full | border-top-right-radius: 9999px; | |
ucm-rounded-tr-lg | border-top-right-radius: 0.5rem; | |
ucm-rounded-tr-md | border-top-right-radius: 0.375rem; | |
ucm-rounded-tr-sm | border-top-right-radius: 0.125rem; | |
ucm-rounded-tr-xl | border-top-right-radius: 0.75rem; | |
ucm-rounded-xl | border-radius: 0.75rem; |
Shadows
17 classes
| Class | CSS | Example |
|---|---|---|
ucm-shadow | box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); | |
ucm-shadow-2xl | box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); | |
ucm-shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); | |
ucm-shadow-lg | box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10); | |
ucm-shadow-md | box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); | |
ucm-shadow-none | box-shadow: none; | |
ucm-shadow-sm | box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10); | |
ucm-shadow-xl | box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10); | |
ucm-shadow-xs | box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); | |
ucm-text-shadow | text-shadow: 0 2px 4px rgba(0,0,0,0.30); | |
ucm-text-shadow-lg | text-shadow: 0 4px 8px rgba(0,0,0,0.40); | |
ucm-text-shadow-md | text-shadow: 0 2px 6px rgba(0,0,0,0.35); | |
ucm-text-shadow-none | text-shadow: none; | |
ucm-text-shadow-sm | text-shadow: 0 1px 3px rgba(0,0,0,0.30); | |
ucm-text-shadow-white | text-shadow: 0 1px 3px rgba(255,255,255,0.80); | |
ucm-text-shadow-xl | text-shadow: 0 6px 16px rgba(0,0,0,0.40); | |
ucm-text-shadow-xs | text-shadow: 0 1px 2px rgba(0,0,0,0.20); |
Rings
16 classes
| Class | CSS | Example |
|---|---|---|
ucm-ring | box-shadow: 0 0 0 3px var(–ucm-ring-color,rgba(236,0,140,.45)); | |
ucm-ring-0 | box-shadow: 0 0 0 0 transparent; | |
ucm-ring-1 | box-shadow: 0 0 0 1px var(–ucm-ring-color,rgba(236,0,140,.45)); | |
ucm-ring-2 | box-shadow: 0 0 0 2px var(–ucm-ring-color,rgba(236,0,140,.45)); | |
ucm-ring-4 | box-shadow: 0 0 0 4px var(–ucm-ring-color,rgba(236,0,140,.45)); | |
ucm-ring-8 | box-shadow: 0 0 0 8px var(–ucm-ring-color,rgba(236,0,140,.45)); | |
ucm-ring-accent | –ucm-ring-color: var(–ucm-color-accent); | |
ucm-ring-danger | –ucm-ring-color: var(–ucm-color-danger); | |
ucm-ring-dark | –ucm-ring-color: #111827; | |
ucm-ring-gray | –ucm-ring-color: #9ca3af; | |
ucm-ring-info | –ucm-ring-color: var(–ucm-color-info); | |
ucm-ring-primary | –ucm-ring-color: var(–ucm-color-primary); | |
ucm-ring-secondary | –ucm-ring-color: var(–ucm-color-secondary); | |
ucm-ring-success | –ucm-ring-color: var(–ucm-color-success); | |
ucm-ring-warning | –ucm-ring-color: var(–ucm-color-warning); | |
ucm-ring-white | –ucm-ring-color: #ffffff; |
Gradients
36 classes
| Class | CSS | Example |
|---|---|---|
ucm-bg-gradient-to-b | background-image: linear-gradient(to bottom,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-bg-gradient-to-bl | background-image: linear-gradient(to bottom left,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-bg-gradient-to-br | background-image: linear-gradient(to bottom right,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-bg-gradient-to-l | background-image: linear-gradient(to left,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-bg-gradient-to-r | background-image: linear-gradient(to right,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-bg-gradient-to-t | background-image: linear-gradient(to top,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-bg-gradient-to-tl | background-image: linear-gradient(to top left,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-bg-gradient-to-tr | background-image: linear-gradient(to top right,var(–ucm-grad-from,transparent),var(–ucm-grad-to,transparent)); | |
ucm-from-accent | –ucm-grad-from: var(–ucm-color-accent); | |
ucm-from-black | –ucm-grad-from: #000000; | |
ucm-from-danger | –ucm-grad-from: var(–ucm-color-danger); | |
ucm-from-gray-50 | –ucm-grad-from: #f9fafb; | |
ucm-from-gray-100 | –ucm-grad-from: #f3f4f6; | |
ucm-from-gray-900 | –ucm-grad-from: #111827; | |
ucm-from-indigo | –ucm-grad-from: #6366f1; | |
ucm-from-info | –ucm-grad-from: var(–ucm-color-info); | |
ucm-from-primary | –ucm-grad-from: var(–ucm-color-primary); | |
ucm-from-secondary | –ucm-grad-from: var(–ucm-color-secondary); | |
ucm-from-success | –ucm-grad-from: var(–ucm-color-success); | |
ucm-from-transparent | –ucm-grad-from: transparent; | |
ucm-from-warning | –ucm-grad-from: var(–ucm-color-warning); | |
ucm-from-white | –ucm-grad-from: #ffffff; | |
ucm-to-accent | –ucm-grad-to: var(–ucm-color-accent); | |
ucm-to-black | –ucm-grad-to: #000000; | |
ucm-to-danger | –ucm-grad-to: var(–ucm-color-danger); | |
ucm-to-gray-50 | –ucm-grad-to: #f9fafb; | |
ucm-to-gray-100 | –ucm-grad-to: #f3f4f6; | |
ucm-to-gray-900 | –ucm-grad-to: #111827; | |
ucm-to-indigo | –ucm-grad-to: #6366f1; | |
ucm-to-info | –ucm-grad-to: var(–ucm-color-info); | |
ucm-to-primary | –ucm-grad-to: var(–ucm-color-primary); | |
ucm-to-secondary | –ucm-grad-to: var(–ucm-color-secondary); | |
ucm-to-success | –ucm-grad-to: var(–ucm-color-success); | |
ucm-to-transparent | –ucm-grad-to: transparent; | |
ucm-to-warning | –ucm-grad-to: var(–ucm-color-warning); | |
ucm-to-white | –ucm-grad-to: #ffffff; |
Effects
21 classes
| Class | CSS | Example |
|---|---|---|
ucm-opacity-0 | opacity: 0; | |
ucm-opacity-5 | opacity: 0.05; | |
ucm-opacity-10 | opacity: 0.10; | |
ucm-opacity-15 | opacity: 0.15; | |
ucm-opacity-20 | opacity: 0.20; | |
ucm-opacity-25 | opacity: 0.25; | |
ucm-opacity-30 | opacity: 0.30; | |
ucm-opacity-35 | opacity: 0.35; | |
ucm-opacity-40 | opacity: 0.40; | |
ucm-opacity-45 | opacity: 0.45; | |
ucm-opacity-50 | opacity: 0.5; | |
ucm-opacity-55 | opacity: 0.55; | |
ucm-opacity-60 | opacity: 0.60; | |
ucm-opacity-65 | opacity: 0.65; | |
ucm-opacity-70 | opacity: 0.70; | |
ucm-opacity-75 | opacity: 0.75; | |
ucm-opacity-80 | opacity: 0.80; | |
ucm-opacity-85 | opacity: 0.85; | |
ucm-opacity-90 | opacity: 0.90; | |
ucm-opacity-95 | opacity: 0.95; | |
ucm-opacity-100 | opacity: 1; |
Transforms
83 classes
| Class | CSS | Example |
|---|---|---|
ucm-origin-bottom | transform-origin: bottom; | |
ucm-origin-bottom-left | transform-origin: bottom left; | |
ucm-origin-bottom-right | transform-origin: bottom right; | |
ucm-origin-center | transform-origin: center; | |
ucm-origin-left | transform-origin: left; | |
ucm-origin-right | transform-origin: right; | |
ucm-origin-top | transform-origin: top; | |
ucm-origin-top-left | transform-origin: top left; | |
ucm-origin-top-right | transform-origin: top right; | |
ucm-rotate-0 | transform: rotate(0deg); | |
ucm-rotate-1 | transform: rotate(1deg); | |
ucm-rotate-2 | transform: rotate(2deg); | |
ucm-rotate-3 | transform: rotate(3deg); | |
ucm-rotate-6 | transform: rotate(6deg); | |
ucm-rotate-12 | transform: rotate(12deg); | |
ucm-rotate-45 | transform: rotate(45deg); | |
ucm-rotate-90 | transform: rotate(90deg); | |
ucm-rotate-180 | transform: rotate(180deg); | |
ucm-scale-0 | transform: scale(0); | |
ucm-scale-50 | transform: scale(0.5); | |
ucm-scale-75 | transform: scale(0.75); | |
ucm-scale-90 | transform: scale(0.9); | |
ucm-scale-95 | transform: scale(0.95); | |
ucm-scale-100 | transform: scale(1); | |
ucm-scale-105 | transform: scale(1.05); | |
ucm-scale-110 | transform: scale(1.1); | |
ucm-scale-125 | transform: scale(1.25); | |
ucm-scale-150 | transform: scale(1.5); | |
ucm-skew-x-0 | transform: skewX(0deg); | |
ucm-skew-x-1 | transform: skewX(1deg); | |
ucm-skew-x-2 | transform: skewX(2deg); | |
ucm-skew-x-3 | transform: skewX(3deg); | |
ucm-skew-x-6 | transform: skewX(6deg); | |
ucm-skew-x-12 | transform: skewX(12deg); | |
ucm-skew-y-0 | transform: skewY(0deg); | |
ucm-skew-y-1 | transform: skewY(1deg); | |
ucm-skew-y-2 | transform: skewY(2deg); | |
ucm-skew-y-3 | transform: skewY(3deg); | |
ucm-skew-y-6 | transform: skewY(6deg); | |
ucm-skew-y-12 | transform: skewY(12deg); | |
ucm-transform-none | transform: none; | |
ucm-translate-x-0 | transform: translateX(0); | |
ucm-translate-x-0-5 | transform: translateX(0.125rem); | |
ucm-translate-x-1 | transform: translateX(0.25rem); | |
ucm-translate-x-1-2 | transform: translateX(50%); | |
ucm-translate-x-2 | transform: translateX(0.5rem); | |
ucm-translate-x-3 | transform: translateX(0.75rem); | |
ucm-translate-x-4 | transform: translateX(1rem); | |
ucm-translate-x-5 | transform: translateX(1.25rem); | |
ucm-translate-x-6 | transform: translateX(1.5rem); | |
ucm-translate-x-8 | transform: translateX(2rem); | |
ucm-translate-x-10 | transform: translateX(2.5rem); | |
ucm-translate-x-12 | transform: translateX(3rem); | |
ucm-translate-x-16 | transform: translateX(4rem); | |
ucm-translate-x-20 | transform: translateX(5rem); | |
ucm-translate-x-24 | transform: translateX(6rem); | |
ucm-translate-x-32 | transform: translateX(8rem); | |
ucm-translate-x-40 | transform: translateX(10rem); | |
ucm-translate-x-48 | transform: translateX(12rem); | |
ucm-translate-x-64 | transform: translateX(16rem); | |
ucm-translate-x-full | transform: translateX(100%); | |
ucm-translate-x-px | transform: translateX(1px); | |
ucm-translate-y-0 | transform: translateY(0); | |
ucm-translate-y-0-5 | transform: translateY(0.125rem); | |
ucm-translate-y-1 | transform: translateY(0.25rem); | |
ucm-translate-y-1-2 | transform: translateY(50%); | |
ucm-translate-y-2 | transform: translateY(0.5rem); | |
ucm-translate-y-3 | transform: translateY(0.75rem); | |
ucm-translate-y-4 | transform: translateY(1rem); | |
ucm-translate-y-5 | transform: translateY(1.25rem); | |
ucm-translate-y-6 | transform: translateY(1.5rem); | |
ucm-translate-y-8 | transform: translateY(2rem); | |
ucm-translate-y-10 | transform: translateY(2.5rem); | |
ucm-translate-y-12 | transform: translateY(3rem); | |
ucm-translate-y-16 | transform: translateY(4rem); | |
ucm-translate-y-20 | transform: translateY(5rem); | |
ucm-translate-y-24 | transform: translateY(6rem); | |
ucm-translate-y-32 | transform: translateY(8rem); | |
ucm-translate-y-40 | transform: translateY(10rem); | |
ucm-translate-y-48 | transform: translateY(12rem); | |
ucm-translate-y-64 | transform: translateY(16rem); | |
ucm-translate-y-full | transform: translateY(100%); | |
ucm-translate-y-px | transform: translateY(1px); |
Filters
61 classes
| Class | CSS | Example |
|---|---|---|
ucm-backdrop-blur | backdrop-filter: blur(8px); | |
ucm-backdrop-blur-2xl | backdrop-filter: blur(40px); | |
ucm-backdrop-blur-3xl | backdrop-filter: blur(64px); | |
ucm-backdrop-blur-lg | backdrop-filter: blur(16px); | |
ucm-backdrop-blur-md | backdrop-filter: blur(12px); | |
ucm-backdrop-blur-none | backdrop-filter: blur(0); | |
ucm-backdrop-blur-sm | backdrop-filter: blur(4px); | |
ucm-backdrop-blur-xl | backdrop-filter: blur(24px); | |
ucm-blur | filter: blur(8px); | |
ucm-blur-2xl | filter: blur(40px); | |
ucm-blur-3xl | filter: blur(64px); | |
ucm-blur-lg | filter: blur(16px); | |
ucm-blur-md | filter: blur(12px); | |
ucm-blur-none | filter: blur(0); | |
ucm-blur-sm | filter: blur(4px); | |
ucm-blur-xl | filter: blur(24px); | |
ucm-brightness-0 | filter: brightness(0); | |
ucm-brightness-50 | filter: brightness(0.5); | |
ucm-brightness-75 | filter: brightness(0.75); | |
ucm-brightness-90 | filter: brightness(0.9); | |
ucm-brightness-95 | filter: brightness(0.95); | |
ucm-brightness-100 | filter: brightness(1); | |
ucm-brightness-105 | filter: brightness(1.05); | |
ucm-brightness-110 | filter: brightness(1.1); | |
ucm-brightness-125 | filter: brightness(1.25); | |
ucm-brightness-150 | filter: brightness(1.5); | |
ucm-brightness-200 | filter: brightness(2); | |
ucm-contrast-0 | filter: contrast(0); | |
ucm-contrast-50 | filter: contrast(0.5); | |
ucm-contrast-75 | filter: contrast(0.75); | |
ucm-contrast-90 | filter: contrast(0.9); | |
ucm-contrast-95 | filter: contrast(0.95); | |
ucm-contrast-100 | filter: contrast(1); | |
ucm-contrast-105 | filter: contrast(1.05); | |
ucm-contrast-110 | filter: contrast(1.1); | |
ucm-contrast-125 | filter: contrast(1.25); | |
ucm-contrast-150 | filter: contrast(1.5); | |
ucm-contrast-200 | filter: contrast(2); | |
ucm-grayscale | filter: grayscale(1); | |
ucm-grayscale-0 | filter: grayscale(0); | |
ucm-hue-rotate-0 | filter: hue-rotate(0deg); | |
ucm-hue-rotate-15 | filter: hue-rotate(15deg); | |
ucm-hue-rotate-30 | filter: hue-rotate(30deg); | |
ucm-hue-rotate-60 | filter: hue-rotate(60deg); | |
ucm-hue-rotate-90 | filter: hue-rotate(90deg); | |
ucm-hue-rotate-180 | filter: hue-rotate(180deg); | |
ucm-invert | filter: invert(1); | |
ucm-invert-0 | filter: invert(0); | |
ucm-saturate-0 | filter: saturate(0); | |
ucm-saturate-50 | filter: saturate(0.5); | |
ucm-saturate-75 | filter: saturate(0.75); | |
ucm-saturate-90 | filter: saturate(0.9); | |
ucm-saturate-95 | filter: saturate(0.95); | |
ucm-saturate-100 | filter: saturate(1); | |
ucm-saturate-105 | filter: saturate(1.05); | |
ucm-saturate-110 | filter: saturate(1.1); | |
ucm-saturate-125 | filter: saturate(1.25); | |
ucm-saturate-150 | filter: saturate(1.5); | |
ucm-saturate-200 | filter: saturate(2); | |
ucm-sepia | filter: sepia(1); | |
ucm-sepia-0 | filter: sepia(0); |
Transition
29 classes
| Class | CSS | Example |
|---|---|---|
ucm-animate-bounce | animation: ucm-bounce 1s infinite; | |
ucm-animate-none | animation: none; | |
ucm-animate-ping | animation: ucm-ping 1s cubic-bezier(0,0,0.2,1) infinite; | |
ucm-animate-pulse | animation: ucm-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; | |
ucm-animate-spin | animation: ucm-spin 1s linear infinite; | |
ucm-delay-0 | transition-delay: 0ms; | |
ucm-delay-75 | transition-delay: 75ms; | |
ucm-delay-100 | transition-delay: 100ms; | |
ucm-delay-150 | transition-delay: 150ms; | |
ucm-delay-200 | transition-delay: 200ms; | |
ucm-delay-300 | transition-delay: 300ms; | |
ucm-delay-500 | transition-delay: 500ms; | |
ucm-delay-700 | transition-delay: 700ms; | |
ucm-delay-1000 | transition-delay: 1000ms; | |
ucm-duration-0 | transition-duration: 0ms; | |
ucm-duration-75 | transition-duration: 75ms; | |
ucm-duration-100 | transition-duration: 100ms; | |
ucm-duration-150 | transition-duration: 150ms; | |
ucm-duration-200 | transition-duration: 200ms; | |
ucm-duration-300 | transition-duration: 300ms; | |
ucm-duration-500 | transition-duration: 500ms; | |
ucm-duration-700 | transition-duration: 700ms; | |
ucm-duration-1000 | transition-duration: 1000ms; | |
ucm-ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1); | |
ucm-ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
ucm-ease-linear | transition-timing-function: linear; | |
ucm-ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1); | |
ucm-transition | transition: all 150ms ease; | |
ucm-transition-none | transition: none; |
Overflow
18 classes
| Class | CSS | Example |
|---|---|---|
ucm-overflow-auto | overflow: auto; | |
ucm-overflow-clip | overflow: clip; | |
ucm-overflow-hidden | overflow: hidden; | |
ucm-overflow-scroll | overflow: scroll; | |
ucm-overflow-visible | overflow: visible; | |
ucm-overflow-x-auto | overflow-x: auto; | |
ucm-overflow-x-hidden | overflow-x: hidden; | |
ucm-overflow-x-scroll | overflow-x: scroll; | |
ucm-overflow-x-visible | overflow-x: visible; | |
ucm-overflow-y-auto | overflow-y: auto; | |
ucm-overflow-y-hidden | overflow-y: hidden; | |
ucm-overflow-y-scroll | overflow-y: scroll; | |
ucm-overflow-y-visible | overflow-y: visible; | |
ucm-overscroll-auto | overscroll-behavior: auto; | |
ucm-overscroll-contain | overscroll-behavior: contain; | |
ucm-overscroll-none | overscroll-behavior: none; | |
ucm-scroll-auto | scroll-behavior: auto; | |
ucm-scroll-smooth | scroll-behavior: smooth; |
Interactivity
31 classes
| Class | CSS | Example |
|---|---|---|
ucm-appearance-auto | appearance: auto; | |
ucm-appearance-none | appearance: none; | |
ucm-cursor-auto | cursor: auto; | |
ucm-cursor-crosshair | cursor: crosshair; | |
ucm-cursor-default | cursor: default; | |
ucm-cursor-grab | cursor: grab; | |
ucm-cursor-grabbing | cursor: grabbing; | |
ucm-cursor-help | cursor: help; | |
ucm-cursor-move | cursor: move; | |
ucm-cursor-none | cursor: none; | |
ucm-cursor-not-allowed | cursor: not-allowed; | |
ucm-cursor-pointer | cursor: pointer; | |
ucm-cursor-text | cursor: text; | |
ucm-cursor-wait | cursor: wait; | |
ucm-cursor-zoom-in | cursor: zoom-in; | |
ucm-pointer-events-auto | pointer-events: auto; | |
ucm-pointer-events-none | pointer-events: none; | |
ucm-resize | resize: both; | |
ucm-resize-none | resize: none; | |
ucm-resize-x | resize: horizontal; | |
ucm-resize-y | resize: vertical; | |
ucm-select-all | user-select: all; | |
ucm-select-auto | user-select: auto; | |
ucm-select-none | user-select: none; | |
ucm-select-text | user-select: text; | |
ucm-touch-auto | touch-action: auto; | |
ucm-touch-manipulation | touch-action: manipulation; | |
ucm-touch-none | touch-action: none; | |
ucm-touch-pan-x | touch-action: pan-x; | |
ucm-touch-pan-y | touch-action: pan-y; | |
ucm-touch-pinch-zoom | touch-action: pinch-zoom; |
Columns
12 classes
| Class | CSS | Example |
|---|---|---|
ucm-columns-1 | columns: 1; | |
ucm-columns-2 | columns: 2; | |
ucm-columns-3 | columns: 3; | |
ucm-columns-4 | columns: 4; | |
ucm-columns-5 | columns: 5; | |
ucm-columns-6 | columns: 6; | |
ucm-columns-7 | columns: 7; | |
ucm-columns-8 | columns: 8; | |
ucm-columns-9 | columns: 9; | |
ucm-columns-10 | columns: 10; | |
ucm-columns-11 | columns: 11; | |
ucm-columns-12 | columns: 12; |
Lists
2 classes
| Class | CSS | Example |
|---|---|---|
ucm-list-inside | list-style-position: inside; | |
ucm-list-outside | list-style-position: outside; |
Multi-property
85 classes
| Class | CSS | Example |
|---|---|---|
ucm-border-x | several declarations | |
ucm-border-x-0 | several declarations | |
ucm-border-x-2 | several declarations | |
ucm-border-x-4 | several declarations | |
ucm-border-y | several declarations | |
ucm-border-y-0 | several declarations | |
ucm-border-y-2 | several declarations | |
ucm-border-y-4 | several declarations | |
ucm-inset-x-0 | several declarations | |
ucm-inset-x-auto | several declarations | |
ucm-inset-x-px | several declarations | |
ucm-inset-y-0 | several declarations | |
ucm-inset-y-auto | several declarations | |
ucm-inset-y-px | several declarations | |
ucm-line-clamp-1 | several declarations | |
ucm-line-clamp-2 | several declarations | |
ucm-line-clamp-3 | several declarations | |
ucm-line-clamp-4 | several declarations | |
ucm-line-clamp-5 | several declarations | |
ucm-line-clamp-6 | several declarations | |
ucm-not-sr-only | several declarations | |
ucm-rounded-b | several declarations | |
ucm-rounded-b-2xl | several declarations | |
ucm-rounded-b-3xl | several declarations | |
ucm-rounded-b-full | several declarations | |
ucm-rounded-b-lg | several declarations | |
ucm-rounded-b-md | several declarations | |
ucm-rounded-b-sm | several declarations | |
ucm-rounded-b-xl | several declarations | |
ucm-rounded-l | several declarations | |
ucm-rounded-l-2xl | several declarations | |
ucm-rounded-l-3xl | several declarations | |
ucm-rounded-l-full | several declarations | |
ucm-rounded-l-lg | several declarations | |
ucm-rounded-l-md | several declarations | |
ucm-rounded-l-sm | several declarations | |
ucm-rounded-l-xl | several declarations | |
ucm-rounded-r | several declarations | |
ucm-rounded-r-2xl | several declarations | |
ucm-rounded-r-3xl | several declarations | |
ucm-rounded-r-full | several declarations | |
ucm-rounded-r-lg | several declarations | |
ucm-rounded-r-md | several declarations | |
ucm-rounded-r-sm | several declarations | |
ucm-rounded-r-xl | several declarations | |
ucm-rounded-t | several declarations | |
ucm-rounded-t-2xl | several declarations | |
ucm-rounded-t-3xl | several declarations | |
ucm-rounded-t-full | several declarations | |
ucm-rounded-t-lg | several declarations | |
ucm-rounded-t-md | several declarations | |
ucm-rounded-t-sm | several declarations | |
ucm-rounded-t-xl | several declarations | |
ucm-size-0 | several declarations | |
ucm-size-1 | several declarations | |
ucm-size-2 | several declarations | |
ucm-size-3 | several declarations | |
ucm-size-4 | several declarations | |
ucm-size-5 | several declarations | |
ucm-size-6 | several declarations | |
ucm-size-8 | several declarations | |
ucm-size-10 | several declarations | |
ucm-size-12 | several declarations | |
ucm-size-16 | several declarations | |
ucm-size-20 | several declarations | |
ucm-size-24 | several declarations | |
ucm-size-32 | several declarations | |
ucm-size-40 | several declarations | |
ucm-size-48 | several declarations | |
ucm-size-64 | several declarations | |
ucm-size-96 | several declarations | |
ucm-size-auto | several declarations | |
ucm-size-fit | several declarations | |
ucm-size-full | several declarations | |
ucm-size-max | several declarations | |
ucm-size-min | several declarations | |
ucm-size-px | several declarations | |
ucm-size-screen | several declarations | |
ucm-sr-only | several declarations | |
ucm-transition-all | several declarations | |
ucm-transition-colors | several declarations | |
ucm-transition-opacity | several declarations | |
ucm-transition-shadow | several declarations | |
ucm-transition-transform | several declarations | |
ucm-truncate | several declarations |
Misc
34 classes
| Class | CSS | Example |
|---|---|---|
ucm-accent-auto | accent-color: auto; | |
ucm-accent-current | accent-color: currentColor; | |
ucm-accent-inherit | accent-color: inherit; | |
ucm-box-border | box-sizing: border-box; | |
ucm-box-content | box-sizing: content-box; | |
ucm-caption-bottom | caption-side: bottom; | |
ucm-caption-top | caption-side: top; | |
ucm-clear-both | clear: both; | |
ucm-clear-left | clear: left; | |
ucm-clear-none | clear: none; | |
ucm-clear-right | clear: right; | |
ucm-fill-current | fill: currentColor; | |
ucm-fill-none | fill: none; | |
ucm-float-left | float: left; | |
ucm-float-none | float: none; | |
ucm-float-right | float: right; | |
ucm-hyphens-auto | hyphens: auto; | |
ucm-hyphens-manual | hyphens: manual; | |
ucm-hyphens-none | hyphens: none; | |
ucm-outline | outline: 1px solid; | |
ucm-outline-2 | outline: 2px solid; | |
ucm-outline-none | outline: none; | |
ucm-overline | text-decoration-line: overline; | |
ucm-stroke-0 | stroke-width: 0; | |
ucm-stroke-1 | stroke-width: 1; | |
ucm-stroke-2 | stroke-width: 2; | |
ucm-stroke-current | stroke: currentColor; | |
ucm-stroke-none | stroke: none; | |
ucm-table-auto | table-layout: auto; | |
ucm-table-fixed | table-layout: fixed; | |
ucm-will-change-auto | will-change: auto; | |
ucm-will-change-contents | will-change: contents; | |
ucm-will-change-scroll | will-change: scroll-position; | |
ucm-will-change-transform | will-change: transform; |
No class matches that filter.
Want these in context?
The layout cookbook shows these classes assembled into rows, page templates and ready-made sections you can copy straight into the editor.