lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Typography

Blueprint Typography provides an out-of-the-box tool kit for consistent type styles. BlueprintUI Typography can be used standalone of other BlueprintUI components and utilities.

  • Automatic contrast adjustment
  • Semantic size types for enhanced readability
  • Responsive sizing for optimal display
  • Text transformation capabilities
  • Customizable theming options

Installation

npm install @blueprintui/typography
@import '@blueprintui/typography/index.min.css';

Content

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)
The five boxing wizards jump quickly (message)
The five boxing wizards jump quickly (caption)
code
<div bp-layout="block gap:md">
  <h1 bp-text="heading">The five boxing wizards jump quickly (heading)</h1>
  <h2 bp-text="subheading">The five boxing wizards jump quickly (subheading)</h2>
  <h3 bp-text="section">The five boxing wizards jump quickly (section)</h3>
  <h4 bp-text="subsection">The five boxing wizards jump quickly (subsection)</h4>
  <h5 bp-text="content">The five boxing wizards jump quickly (content)</h5>
  <h6 bp-text="message">The five boxing wizards jump quickly (message)</h6>
  <h6 bp-text="caption">The five boxing wizards jump quickly (caption)</h6>
</div>

Alignment

align start

align center

align end

code
<div bp-layout="block gap:md inline:stretch">
  <p bp-text="content start">align start</p>
  <p bp-text="content center">align center</p>
  <p bp-text="content end">align end</p>
</div>

Size

The five boxing wizards jump quickly (banner)

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)

The five boxing wizards jump quickly (message)

The five boxing wizards jump quickly (caption)

Small

The five boxing wizards jump quickly (banner)

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)

The five boxing wizards jump quickly (message)

The five boxing wizards jump quickly (caption)

Large

The five boxing wizards jump quickly (banner)

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)

The five boxing wizards jump quickly (message)

The five boxing wizards jump quickly (caption)

code
<div bp-layout="block gap:lg">
  <div bp-layout="block gap:md">
    <p bp-text="banner">The five boxing wizards jump quickly (banner)</p>
    <p bp-text="heading">The five boxing wizards jump quickly (heading)</p>
    <p bp-text="subheading">The five boxing wizards jump quickly (subheading)</p>
    <p bp-text="section">The five boxing wizards jump quickly (section)</p>
    <p bp-text="subsection">The five boxing wizards jump quickly (subsection)</p>
    <p bp-text="content">The five boxing wizards jump quickly (content)</p>
    <p bp-text="message">The five boxing wizards jump quickly (message)</p>
    <p bp-text="caption">The five boxing wizards jump quickly (caption)</p>
  </div>
  <div bp-layout="block gap:md">
    <h2 bp-text="banner size:sm">Small</h2>
    <p bp-text="banner size:sm">The five boxing wizards jump quickly (banner)</p>
    <p bp-text="heading size:sm">The five boxing wizards jump quickly (heading)</p>
    <p bp-text="subheading size:sm">The five boxing wizards jump quickly (subheading)</p>
    <p bp-text="section size:sm">The five boxing wizards jump quickly (section)</p>
    <p bp-text="subsection size:sm">The five boxing wizards jump quickly (subsection)</p>
    <p bp-text="content size:sm">The five boxing wizards jump quickly (content)</p>
    <p bp-text="message size:sm">The five boxing wizards jump quickly (message)</p>
    <p bp-text="caption size:sm">The five boxing wizards jump quickly (caption)</p>
  </div>
  <div bp-layout="block gap:md">
    <h2 bp-text="banner size:lg">Large</h2>
    <p bp-text="banner size:lg">The five boxing wizards jump quickly (banner)</p>
    <p bp-text="heading size:lg">The five boxing wizards jump quickly (heading)</p>
    <p bp-text="subheading size:lg">The five boxing wizards jump quickly (subheading)</p>
    <p bp-text="section size:lg">The five boxing wizards jump quickly (section)</p>
    <p bp-text="subsection size:lg">The five boxing wizards jump quickly (subsection)</p>
    <p bp-text="content size:lg">The five boxing wizards jump quickly (content)</p>
    <p bp-text="message size:lg">The five boxing wizards jump quickly (message)</p>
    <p bp-text="caption size:lg">The five boxing wizards jump quickly (caption)</p>
  </div>
</div>

Static Size

Static

The five boxing wizards jump quickly (banner)

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)

The five boxing wizards jump quickly (message)

The five boxing wizards jump quickly (caption)

Default

The five boxing wizards jump quickly (banner)

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)

The five boxing wizards jump quickly (message)

The five boxing wizards jump quickly (caption)

code
<div bp-layout="block gap:lg">
  <div bp-layout="block gap:md">
    <h2 bp-text="banner size:static">Static</h2>
    <p bp-text="banner size:static">The five boxing wizards jump quickly (banner)</p>
    <p bp-text="heading size:static">The five boxing wizards jump quickly (heading)</p>
    <p bp-text="subheading size:static">The five boxing wizards jump quickly (subheading)</p>
    <p bp-text="section size:static">The five boxing wizards jump quickly (section)</p>
    <p bp-text="subsection size:static">The five boxing wizards jump quickly (subsection)</p>
    <p bp-text="content size:static">The five boxing wizards jump quickly (content)</p>
    <p bp-text="message size:static">The five boxing wizards jump quickly (message)</p>
    <p bp-text="caption size:static">The five boxing wizards jump quickly (caption)</p>
  </div>
  <div bp-layout="block gap:md">
    <h2 bp-text="banner">Default</h2>
    <p bp-text="banner">The five boxing wizards jump quickly (banner)</p>
    <p bp-text="heading">The five boxing wizards jump quickly (heading)</p>
    <p bp-text="subheading">The five boxing wizards jump quickly (subheading)</p>
    <p bp-text="section">The five boxing wizards jump quickly (section)</p>
    <p bp-text="subsection">The five boxing wizards jump quickly (subsection)</p>
    <p bp-text="content">The five boxing wizards jump quickly (content)</p>
    <p bp-text="message">The five boxing wizards jump quickly (message)</p>
    <p bp-text="caption">The five boxing wizards jump quickly (caption)</p>
  </div>
</div>

Auto Contrast

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)

The five boxing wizards jump quickly (message)

The five boxing wizards jump quickly (caption)

The five boxing wizards jump quickly (heading)

The five boxing wizards jump quickly (subheading)

The five boxing wizards jump quickly (section)

The five boxing wizards jump quickly (subsection)

The five boxing wizards jump quickly (content)

The five boxing wizards jump quickly (message)

The five boxing wizards jump quickly (caption)

code
<div bp-layout="block gap:md" style="--background: #2d2d2d; background: var(--background)">
  <p bp-text="heading">The five boxing wizards jump quickly (heading)</p>
  <p bp-text="subheading">The five boxing wizards jump quickly (subheading)</p>
  <p bp-text="section">The five boxing wizards jump quickly (section)</p>
  <p bp-text="subsection">The five boxing wizards jump quickly (subsection)</p>
  <p bp-text="content">The five boxing wizards jump quickly (content)</p>
  <p bp-text="message">The five boxing wizards jump quickly (message)</p>
  <p bp-text="caption">The five boxing wizards jump quickly (caption)</p>
</div>
<div bp-layout="block gap:md" style="--background: #f2f2f2; background: var(--background)">
  <p bp-text="heading">The five boxing wizards jump quickly (heading)</p>
  <p bp-text="subheading">The five boxing wizards jump quickly (subheading)</p>
  <p bp-text="section">The five boxing wizards jump quickly (section)</p>
  <p bp-text="subsection">The five boxing wizards jump quickly (subsection)</p>
  <p bp-text="content">The five boxing wizards jump quickly (content)</p>
  <p bp-text="message">The five boxing wizards jump quickly (message)</p>
  <p bp-text="caption">The five boxing wizards jump quickly (caption)</p>
</div>

Fill

The five boxing wizards jump quickly (fill)

The five boxing wizards jump quickly (default)

code
<div bp-layout="block gap:md">
  <p bp-text="content fill">The five boxing wizards jump quickly (fill)</p>
  <p bp-text="content">The five boxing wizards jump quickly (default)</p>
</div>
link link link

link in a paragraph

link in a heading

code
<div bp-layout="block gap:md">
  <a href="#" bp-text="link">link</a>
  <a href="#" bp-text="link">link</a>
  <a href="#" bp-text="link">link</a>
  <p bp-text="content"><a href="#" bp-text="link">link</a> in a paragraph</p>
  <h2 bp-text="heading"><a href="#" bp-text="link">link</a> in a heading</h2>
</div>

List

  • list item
  • list item
  • list item
  • list item
  1. list item
  2. list item
  3. list item
  4. list item
code
<div bp-layout="block gap:md">
  <ul bp-text="list">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ul>
  <ol bp-text="list">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ol>
</div>

Style

The five boxing wizards jump quickly (bold)

The five boxing wizards jump quickly (italic)

The five boxing wizards jump quickly (code)

npm install -g @blueprintui/typography
code
<div bp-layout="block gap:md">
  <p bp-text="content">The five <span bp-text="bold">boxing wizards</span> jump quickly (bold)</p>

  <p bp-text="content">The five <span bp-text="italic">boxing wizards</span> jump quickly (italic)</p>

  <p bp-text="content">The five <span bp-text="code">boxing wizards</span> jump quickly (code)</p>

  <pre bp-text="code:block"><code>npm install -g @blueprintui/typography</code></pre>
</div>

Transforms

text title case (capitalize)

Text uppercase (uppercase)

Text Lowercase (lowercase)

code
<div bp-layout="block gap:md">
  <p bp-text="content capitalize">text title case (capitalize)</p>
  <p bp-text="content uppercase">Text uppercase (uppercase)</p>
  <p bp-text="content lowercase">Text Lowercase (lowercase)</p>
</div>