THEME - CSS Test Document

Complete reference for all available CSS classes and components

1. Typography

Class: h1 or .text-h1

This is H1 Heading

Class: h2 or .text-h2

This is H2 Heading

Class: h3 or .text-h3

This is H3 Heading

Class: h4 or .text-h4

This is H4 Heading

Class: h5 or .text-h5

This is H5 Heading

Class: h6 or .text-h6

This is H6 Heading

Class: p or .text-body

This is body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Class: .font-primary

This text uses the primary font family

Class: .font-secondary

This text uses the secondary font family

2. Text Colors

Class: .text-primary

This is primary text color

Class: .text-secondary

This is secondary text color

Class: .text-tertiary

This is tertiary text color

3. Background Colors

Class: .bg-primary

Background Primary

Class: .bg-secondary

Background Secondary

Class: .bg-primary-accent-1

Background Primary Accent 1

Class: .bg-primary-accent-2

Background Primary Accent 2

Class: .bg-secondary-accent

Background Secondary Accent

Class: .bg-brand-primary

Background Brand Primary

Class: .bg-brand-secondary

Background Brand Secondary

4. Buttons

Class: .btn .btn-primary

Class: .btn .btn-secondary

Note: On mobile (≤425px), buttons become full width

(Resize browser to ≤425px to see effect)

5. Layout & Spacing

Class: .container

This is a section with responsive vertical padding (top and bottom)

Class: .section

6. Borders & Corners

Class: .border

This element has a border on all sides

Class: .border-t

This element has a border on the top only

Class: .border-r

This element has a border on the right only

Class: .border-b

This element has a border on the bottom only

Class: .border-l

This element has a border on the left only

Class: .rounded

This element has responsive rounded corners

Class: .rounded-full

Circle

Class: .rounded-none

This element has no rounded corners (sharp edges)

7. Display Utilities

Class: .hidden

The text below is hidden with .hidden class:

(Nothing should appear above this line)

Class: .block This span is displayed as block

Class: .hidden-mobile (visible on desktop ≥768px only)

This text is HIDDEN on mobile (screen width < 768px)

(Resize browser to test)

Class: .hidden-desktop (visible on mobile <768px only)

This text is HIDDEN on desktop (screen width ≥ 768px)

(Resize browser to test)

8. Text Alignment

Class: .text-left

This text is aligned to the left

Class: .text-center

This text is centered

Class: .text-right

This text is aligned to the right

Class: .text-center-mobile (centered on mobile <768px only)

This text centers on mobile screens only

(Resize browser to <768px to test)

9. Width Utilities

Class: .w-full

This element takes 100% width

Class: .max-w-content

This element has a maximum width constraint (theme max-width)

10. Flex Utilities

Class: .flex

Item 1

Item 2

Item 3

Class: .flex-center

Centered Content

Class: .flex-between

Left Item

Right Item

Class: .flex-col

Item 1

Item 2

Item 3

Class: .flex .flex-wrap

Item 1

Item 2

Item 3

Item 4

11. Spacing Utilities (Padding, Margin, Gap)

Available Spacing Sizes

All spacing utilities use clamp() for responsive scaling between mobile and desktop:

-80: 48px (mobile) → 80px (desktop)
-40: 24px (mobile) → 40px (desktop)
-30: 16px (mobile) → 30px (desktop)
-20: 12px (mobile) → 20px (desktop)
-10: 6px (mobile) → 10px (desktop)
-0: 0px (all screens)

Padding Classes

.p-{size} - Padding all sides
.pt-{size} - Padding top
.pr-{size} - Padding right
.pb-{size} - Padding bottom
.pl-{size} - Padding left
.px-{size} - Padding horizontal (left + right)
.py-{size} - Padding vertical (top + bottom)

Example: .p-40, .px-80, .pt-20

Margin Classes

.m-{size} - Margin all sides
.mt-{size} - Margin top
.mr-{size} - Margin right
.mb-{size} - Margin bottom
.ml-{size} - Margin left
.mx-{size} - Margin horizontal (left + right)
.my-{size} - Margin vertical (top + bottom)

Example: .m-40, .mx-80, .mt-20

Margin Auto Classes

.m-auto - Margin auto (all sides)
.mx-auto - Margin auto horizontal (center element)
.my-auto - Margin auto vertical
.mt-auto, .mr-auto, .mb-auto, .ml-auto - Individual sides

Gap Classes (for Flexbox/Grid)

.gap-80 - 48px → 80px gap
.gap-40 - 24px → 40px gap
.gap-30 - 16px → 30px gap
.gap-20 - 12px → 20px gap
.gap-10 - 6px → 10px gap
.gap-0 - No gap

Live Examples

Class: .p-40 (padding all sides)

Content with 40px padding (responsive)

Class: .px-80 .py-20 (horizontal 80px, vertical 20px padding)

Content with combined padding classes

Class: .mt-80 (margin top)

Previous element

This element has 80px top margin (responsive)

Class: .mx-auto (center element)

This element is horizontally centered

Class: .flex .gap-40 (flex with gap)

Item 1

Item 2

Item 3