Bolt Design System

Tag Usage

<bolt-text> allows for separation of semantics and visual. Using a semantically correct tag will not affect the appearance of the text.

This text has its tag prop defined as: h1

<bolt-text tag="h1">
  This text has its tag prop defined as: h1
</bolt-text>

This text has its tag prop defined as: h2

<bolt-text tag="h2">
  This text has its tag prop defined as: h2
</bolt-text>

This text has its tag prop defined as: h3

<bolt-text tag="h3">
  This text has its tag prop defined as: h3
</bolt-text>

This text has its tag prop defined as: h4

<bolt-text tag="h4">
  This text has its tag prop defined as: h4
</bolt-text>

This text has its tag prop defined as: h5

<bolt-text tag="h5">
  This text has its tag prop defined as: h5
</bolt-text>

This text has its tag prop defined as: h6

<bolt-text tag="h6">
  This text has its tag prop defined as: h6
</bolt-text>

This text has its tag prop defined as: p

<bolt-text tag="p">
  This text has its tag prop defined as: p
</bolt-text>

This text has its tag prop defined as: div

<bolt-text tag="div">
  This text has its tag prop defined as: div
</bolt-text>

This text has its tag prop defined as: span

<bolt-text tag="span">
  This text has its tag prop defined as: span
</bolt-text>