Documentation
Documentation Hub

BaseHeading

Heading

Use the BaseHeading component to display a title or an important heading. You can use various props to customize the size, weight, the line-height and the Html tag used to render the heading.

A huge heading

A bold and very large heading

A smaller and less thicker heading

Smaller and using another color
Show code

#<BaseHeading>

Properties

size
The size of the heading.
Show example
as
The heading element to use (e.g. `h1`, `h2`, etc.).
Show example
weight
The weight of the heading.
Show example
lead
The spacing below the heading.
Show example

Slots

#default
Show example

Paragraph

Use the BaseParagraph component to display a text paragraph. You can use various props to customize the size, weight, the line-height and the Html tag used to render the paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges: constructio interrete. Philosophi autem in suis lectulis plerumque moriuntur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges: constructio interrete. Philosophi autem in suis lectulis plerumque moriuntur.

Any text can have a different color

Show code

#<BaseParagraph>

Properties

size
The size of the paragraph.
Show example
as
The HTML element or component name to use for the paragraph.
Show example
weight
The weight of the paragraph.
Show example
lead
The lead of the paragraph.
Show example

Slots

#default
Show example

Text

Use the BaseText component to display a text span. You can use various props to customize the size, weight, the line-height and the Html tag used to render the content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges: constructio interrete. Philosophi autem in suis lectulis plerumque moriuntur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Duo Reges: constructio interrete. Philosophi autem in suis lectulis plerumque moriuntur.

Any text can have a different color

Show code

#<BaseText>

Properties

size
The size of the text.
Show example
weight
The weight of the text.
Show example
lead
The lead of the text.
Show example

Slots

#default
Show example

Link

Use the BaseLink component to display an HTML anchor element. You can also nest the BaseLink component inside the above typography clusters to inherit their props.

Show code

#<BaseLink>

Properties

replace
Show example
rel
Show example
to
Show example
href
Show example
target
Show example
external
Show example
custom
Show example
no-rel
Show example
prefetch
Show example
no-prefetch
Show example
active-class
Show example
exact-active-class
Show example
aria-current-value
Show example

Slots

#default
Show example