Prism Docs

Typography

Headings

Heading 1

38px / 2.375rem

Heading 2

30px / 1.875rem

Heading 3

24px / 1.5rem

Heading 4

20px / 1.25rem
Heading 5
18px / 1.125rem
Heading 6
16px / 1rem
<!-- Titles -->
<h1 prism-title [level]="1">Heading 1</h1>
<h2 prism-title [level]="2">Heading 2</h2>
<h3 prism-title [level]="3">Heading 3</h3>
<h4 prism-title [level]="4">Heading 4</h4>
<h5 prism-title [level]="5">Heading 5</h5>
<h6 prism-title [level]="6">Heading 6</h6>

Inline Styles

Base TextStrongItalicUnderlineDeletedMarkCodeKbd
<!-- Inline Text Styles -->
<span prism-text>Base Text</span>
<span prism-text [strong]="true">Strong</span>
<span prism-text [italic]="true">Italic</span>
<span prism-text [underline]="true">Underline</span>
<span prism-text [deleted]="true">Deleted</span>
<span prism-text [mark]="true">Mark</span>
<span prism-text [code]="true">Code</span>
<span prism-text [keyboard]="true">Kbd</span>

Variants

DefaultNeutral text color
SecondaryMuted metadata
SuccessPositive feedback
WarningCautionary notes
DangerCritical errors
DisabledNon-interactive
<!-- Text Variants -->
<span prism-text>Default</span>
<span prism-text type="secondary">Secondary</span>
<span prism-text type="success">Success</span>
<span prism-text type="warning">Warning</span>
<span prism-text type="danger">Danger</span>
<span prism-text [disabled]="true">Disabled</span>

Interactive

Copyable
Prism Design System 2024
Editable
This is an editable string.
<!-- Interactive -->
<span prism-text [copyable]="true">Copy This Text</span>
<span prism-text [editable]="true" (contentChange)="onContentChange($event)">{{ editableStr() }}</span>

Paragraphs

Prism (Default) is a comprehensive design system. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Secondary: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Success: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Warning: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Danger: Error occurred while processing the request. Please try again later. 
<!-- Paragraphs -->
<prism-paragraph>
  <span prism-text [strong]="true" class="text-primary-500">Prism</span> (Default) is a comprehensive design system.
</prism-paragraph>

<prism-paragraph type="secondary">
  <span prism-text [strong]="true">Secondary:</span> Muted metadata text.
</prism-paragraph>

<prism-paragraph type="success">
  <span prism-text [strong]="true">Success:</span> Positive feedback text.
</prism-paragraph>

<prism-paragraph type="warning">
  <span prism-text [strong]="true">Warning:</span> Cautionary text.
</prism-paragraph>

<prism-paragraph type="danger">
  <span prism-text [strong]="true">Danger:</span> Critical error text.
</prism-paragraph>
NameTypeDefaultDescription
prism-titleselector-Applied to h1-h6 elements.
levelnumber1Heading level (1-6) for visual styling independent of tag.
prism-textselector-Applied to span elements for inline styling.
type"secondary" | "success" | "warning" | "danger"undefinedSemantic color variant.
strongbooleanfalseApplies font-weight: 600.
italicbooleanfalseApplies font-style: italic.
underlinebooleanfalseApplies text-decoration: underline.
deletedbooleanfalseApplies text-decoration: line-through.
markbooleanfalseApplies yellow background highlight.
codebooleanfalseApplies monospace font and background.
keyboardbooleanfalseApplies keyboard key styling.
copyableboolean | stringfalseEnables copy-to-clipboard. Pass string to copy specific text.
editablebooleanfalseEnables inline editing mode.
prism-paragraphselector-Paragraph container component.
contentChangeoutput<string>-Emits when editable content is confirmed.