Classes
Background Colors
Text Sizes
aby-text-home-title
-> Main Pages h1 Hero Title
aby-text-hero-title
-> SubPages h1 hero title
aby-text-section-title
-> h2 Section titles
aby-text-group-title
-> h3 article title
aby-text-article-title
-> h3 article title
aby-text-article-subtitle
-> article subtitle
aby-text-article
-> used in articles ...
aby-text-card-title
-> small card titles
aby-text-card-md-title
-> medium size card
aby-text-card-lg-title
-> very small strong text (in the footer)
aby-text-card
-> any card text
aby-text-card-feature-title
aby-text-card-feature-text
aby-text-bento-hero-title
aby-text-bento-hero-text
aby-text-bento-card-title
aby-text-bento-card-text
tag-sm
tag-md
tag-lg
aby-text-primary
aby-text-secondary
aby-text-description + aby-theme-1
aby-text-theme-1
// + aby-theme-2
aby-text-description + aby-theme-2
// + aby-theme-3
aby-text-title
aby-text-description + aby-theme-3
// + aby-theme-4
aby-text-title
aby-text-description + aby-theme-4
// + aby-theme-5
aby-text-title
aby-text-description + aby-theme-5
aby-text-title + aby-ghost
Text XL - H2/H3
Section texts
Text under Page Title
Text under Page Title - primary
Text under Page Title - secondary
Default Text
Default Description Text
Flex Props
Flex Directions
Flex Row Props
Flex Col Props
Flex Row Props
Dimensions
Paddings
aby-p[]
[empty] -> 1px (0.0625rem)
1 -> 0.25rem = 4px
1.5 -> 0.375rem = 6px
2 -> 0.5rem = 8px
2.5 -> 0.625rem = 10px
3 -> 0.75rem = 12px
3.5 -> 0.875rem = 14px
4 -> 1rem = 16px
4.5 -> 1.125rem = 18px
5 -> 1.25rem = 20px
6 -> 1.5rem = 24px
7 -> 1.75rem = 28px
8 -> 2rem = 32px
9 -> 2.25rem = 36px
10 -> 2.5rem = 40px
12 -> 3rem = 48px
15 -> 3.75rem = 60px
Components

Title

X

Y

text emphasis
tags
- tag sm:
popular
- tag md:
popular
- tag md:
Contribute
directory
/
file
aby-summary
Title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

card (small card - up to 4 in a row)
card-md
content title
content description
card-lg
This is some text inside of a div block.
This is some text inside of a div block.
card-feature
Title
popular
Feature description
bento-hero
Print-ready production
From screen to press without surprises. Built-in CMYK color space, 300 DPI output, and professional PDF/X-4 export ensure your designs are always print-perfect.
bento-card
This is some text inside of a div block.
This is some text inside of a div block.
bento-card-md
bento-card-lg
Layouts
aby-layout-bento-hero-2cards
aby-layout-bento-hero-3cards
aby-layout-bento-hero-4cards
Print-ready production
From screen to press without surprises. Built-in CMYK color space, 300 DPI output, and professional PDF/X-4 export ensure your designs are always print-perfect.