Tagline

A native, styled tagline element.

This is a tagline

size sm md lg

color base brand

contrast

text

--- 
import { Tagline } from 'fulldev-ui'
---

<Tagline
  size="md"
  color="base"
  contrast={false}
  text="This is a tagline"
/>

Props

Prop	Type	Default
size	sm | md | lg	-
color	base | brand	-
contrast	boolean	-
html	string	-
text	string	-
as	HTMLTag	p
HTML Attributes	Polymorphic<as>	-

Examples

size

The size prop cascades: it is inherited from the parent and it is applied to all children.

This is a tagline This is a tagline This is a tagline

---
import { Tagline } from 'fulldev-ui'
---

<Tagline size="sm">This is a tagline</Tagline>
<Tagline size="md">This is a tagline</Tagline>
<Tagline size="lg">This is a tagline</Tagline>

color

Sets the color variant used for this component and all its children.

The quick brown fox jumps The quick brown fox jumps

---
import { Tagline } from 'fulldev-ui'
---

<Tagline color="base">The quick brown fox jumps</Tagline>
<Tagline color="brand">The quick brown fox jumps</Tagline>

contrast

Set to true by default on Headings, which you can override by setting it to false.

The quick brown fox jumps The quick brown fox jumps

---
import { Tagline } from 'fulldev-ui'
---

<Tagline contrast={true}>The quick brown fox jumps</Tagline>
<Tagline contrast={false}>The quick brown fox jumps</Tagline>