No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Typography
Typography can help create clear hierarchies,
organize information, and guide users through a product or experience.
Headings
SizeWeb ComponentCSS ClassValue

          
Heading 100

        		size="h-100"ab-typography--h-10012px

          
Heading 200

        		size="h-200"ab-typography--h-20014px

          
Heading 300

        		size="h-300"ab-typography--h-30016px

          
Heading 400

        		size="h-400"ab-typography--h-40020px

          
Heading 500

        		size="h-500"ab-typography--h-50024px

          
Heading 600

        		size="h-600"ab-typography--h-60028px

          
Heading 700

        		size="h-700"ab-typography--h-70034px

          
Heading 800

        		size="h-800"ab-typography--h-80042px

          
Heading 900

        		size="h-900"ab-typography--h-90054px
Paragraphs
SizeWeb ComponentCSS ClassValue

          
Paragraph 200

        		size="p-200"ab-typography--p-20010px

          
Paragraph 300

        		size="p-300"ab-typography--p-30012px

          
Paragraph 400

        		size="p-400"ab-typography--p-40014px

          
Paragraph 500

        		size="p-500"ab-typography--p-50016px

          
Paragraph 600

        		size="p-600"ab-typography--p-60018px
Headings
Show source
Oh no! The source is not available.
Paragraphs
Show source
Oh no! The source is not available.
Uppercase
Show source
Oh no! The source is not available.
Alignment
Show source
Oh no! The source is not available.
Ellipsis
Show source
Oh no! The source is not available.
Colors
Typography is available in white, black color, as well as other colors such as primary, secondary, ui, active, warning, positive, data-gold,
data-lime, data-magenta, data-aqua in values 100, 200, 300, 400, 500, 600, 700, 800, 900.
Show source
Oh no! The source is not available.
Variables
Variables represents the vaule of typography inside the implemetation of design system.
Variables can be used to inside custom css.
Headings
SizeVariableValue

          
Heading 100

        		--ab-heading-10012px

          
Heading 200

        		--ab-heading-20014px

          
Heading 300

        		--ab-heading-30016px

          
Heading 400

        		--ab-heading-40020px

          
Heading 500

        		--ab-heading-50024px

          
Heading 600

        		--ab-heading-60028px

          
Heading 700

        		--ab-heading-70034px

          
Heading 800

        		--ab-heading-80042px

          
Heading 900

        		--ab-heading-90054px
Paragraphs
SizeVariableValue

          
Paragraph 200

        		--ab-paragraph-20010px

          
Paragraph 300

        		--ab-paragraph-30012px

          
Paragraph 400

        		--ab-paragraph-40014px

          
Paragraph 500

        		--ab-paragraph-50016px

          
Paragraph 600

        		--ab-paragraph-60018px
The typography variables can be applied to like this:
.component__title {
  font-size: var(--ab-heading-800);
  font-weight: 500;
}