Documentation
Documentation Hub

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
vue

#<BaseHeading>

•Properties (with app.config)

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

•Slots

#default
This slot has no inherted props
Show example
vue

•Exposed

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

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
vue

#<BaseParagraph>

•Properties (with app.config)

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

•Slots

#default
This slot has no inherted props
Show example
vue

•Exposed

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

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
vue

#<BaseText>

•Properties (with app.config)

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

•Slots

#default
This slot has no inherted props
Show example
vue

•Exposed

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

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
vue

#<BaseLink>

•Properties

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

•Slots

#default
This slot has no inherted props
Show example
vue