Text
Typography component with variants matching the arclight type scale.
<arc-text> Overview
Guidelines
When to use
- Use the "as" prop to match heading hierarchy (h1, h2, etc.) even when using a different visual variant
- Use display for hero headlines and heading for section titles to establish clear hierarchy
- Use muted or ghost for supporting text that should not compete with primary content
- Pair the label variant with section containers to create clear content groupings
- Use the code variant for inline code references within body text
When not to use
- Do not render display or heading variants inside a <span> — they are block-level content
- Skip heading levels (e.g. h1 to h3) just to get a particular visual size; use "as" and "variant" independently
- Do not use the accent variant for large blocks of text — the gradient and glow are meant for short highlights
- Do not apply the wordmark variant outside of branding contexts; it is specifically designed for product names
- Do not nest multiple Text components when a single one with the right variant suffices
Features
- Nine typography variants: display, heading, body, muted, ghost, accent, label, wordmark, and code
- Gradient-clipped text rendering on display and accent variants
- Configurable HTML element via the "as" prop (h1-h6, span, p) for semantic control
- Balanced text wrapping on heading and body variants via text-wrap: balance
- Monospace code variant with violet color and subtle glow text-shadow
- Uppercase Tomorrow-font treatment for label and wordmark variants
- Accent variant includes a drop-shadow glow filter for visual emphasis
- Inline display for accent and code variants; block display for all others
Preview
Usage
<arc-text variant="display">Display Headline</arc-text>
<arc-text variant="heading">Section Heading</arc-text>
<arc-text variant="body">Body paragraph text.</arc-text>
<arc-text variant="accent">Accent gradient</arc-text>
<arc-text variant="label">Section Label</arc-text>
<arc-text variant="code">const x = 42;</arc-text>import { Text } from '@arclux/arc-ui-react';
export default function Example() {
return (
<>
<Text variant="display">Display Headline</Text>
<Text variant="heading">Section Heading</Text>
<Text variant="body">Body paragraph text.</Text>
</>
);
}<script setup>
import { Text } from '@arclux/arc-ui-vue';
</script>
<template>
<Text variant="display">Display Headline</Text>
<Text variant="heading">Section Heading</Text>
<Text variant="body">Body paragraph text.</Text>
<Text variant="accent">Accent gradient</Text>
<Text variant="label">Section Label</Text>
<Text variant="code">const x = 42;</Text>
</template><script>
import { Text } from '@arclux/arc-ui-svelte';
</script>
<Text variant="display">Display Headline</Text>
<Text variant="heading">Section Heading</Text>
<Text variant="body">Body paragraph text.</Text>
<Text variant="accent">Accent gradient</Text>
<Text variant="label">Section Label</Text>
<Text variant="code">const x = 42;</Text>import { Component } from '@angular/core';
import { Text } from '@arclux/arc-ui-angular';
@Component({
imports: [Text],
template: `
<arc-text variant="display">Display Headline</arc-text>
<arc-text variant="heading">Section Heading</arc-text>
<arc-text variant="body">Body paragraph text.</arc-text>
<arc-text variant="accent">Accent gradient</arc-text>
<arc-text variant="label">Section Label</arc-text>
<arc-text variant="code">const x = 42;</arc-text>
`,
})
export class MyComponent {}import { Text } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<Text variant="display">Display Headline</Text>
<Text variant="heading">Section Heading</Text>
<Text variant="body">Body paragraph text.</Text>
<Text variant="accent">Accent gradient</Text>
<Text variant="label">Section Label</Text>
<Text variant="code">const x = 42;</Text>
</>
);
}import { Text } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<Text variant="display">Display Headline</Text>
<Text variant="heading">Section Heading</Text>
<Text variant="body">Body paragraph text.</Text>
<Text variant="accent">Accent gradient</Text>
<Text variant="label">Section Label</Text>
<Text variant="code">const x = 42;</Text>
</>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-text — requires text.css + base.css (or arc-ui.css) -->
<div class="arc-text">
<p class="text--Variant">Text</p>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-text — self-contained, no external CSS needed -->
<div class="arc-text" style="display: block">
<p>Text</p>
</div>API
-
variant'display' | 'heading' | 'body' | 'muted' | 'ghost' | 'accent' | 'label' | 'wordmark' | 'code''body' - Typography variant that controls font size, weight, letter-spacing, line-height, and color.
-
as'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span''p' - The HTML element to render. Allows semantic heading hierarchy to be set independently from the visual variant.