Skip to content

Paragraph

A native, styled paragraph element.


The quick brown fox jumps over the lazy dog

---
import { Paragraph } from 'fulldev-ui'
---
<Paragraph>The quick brown fox jumps over the lazy dog</Paragraph>

Props

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its children.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

---
import { Paragraph } from 'fulldev-ui'
---
<Paragraph size="sm">The quick brown fox jumps over the lazy dog</Paragraph>
<Paragraph size="md">The quick brown fox jumps over the lazy dog</Paragraph>
<Paragraph size="lg">The quick brown fox jumps over the lazy dog</Paragraph>

density

Type: density?: 'base' | 'compact' | string

Changes the underlying values used by the size prop, for this component and all its children.

For example, we set compact on a card and can now size this and all children automatically based on the size on the wrapping block/section.

Choose a predefined density, or a custom value defined like explained in the theming guide.

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps

---
import { Paragraph } from 'fulldev-ui'
---
<Paragraph density="compact" size="sm">The quick brown fox jumps</Paragraph>
<Paragraph density="compact" size="md">The quick brown fox jumps</Paragraph>
<Paragraph density="compact" size="lg">The quick brown fox jumps</Paragraph>

variant

Type: color?: 'base' | 'muted'

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

The quick brown fox jumps

The quick brown fox jumps

---
import { Paragraph } from 'fulldev-ui'
---
<Paragraph variant="base">The quick brown fox jumps</Paragraph>
<Paragraph variant="muted">The quick brown fox jumps</Paragraph>

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

text

Type: text?: string

Useful when getting content from Astro content collections or a headless CMS.

html

Type: html?: string

Similar to text prop, but renders HTML. Use this for for <span>, <br>, etc.

as & HTML Attributes

Type: as?: HTMLTag = 'h2'

Used to determine which HTML tag is used to render the component.

Based on the value, all HTML attributes of this tag are accepted as props too.

For a detailed explanation see Polymorphic props in the Astro documentation.