text

text docs

Text

Getting Started

Text component v2. This is still in progress and only available as a web component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-text

Usage

  
  This is text.

Schema

Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

 N/A
text* string

Text content of the headline.

 N/A
tag string
  • h1, h2, h3, h4, h5, h6, p, div, span, cite

HTML semantic tags.

 p
display string
  • inline OR block

Inline text or a block of text.

 block
color string
  • theme-headline OR theme-body

Text color in context of theme colors.

 theme-body
align string
  • inherit, start, center, end

Text alignment.

 inherit
opacity number
  • 100, 80, 60, 40, 20

Opacity level.

 100
quoted boolean
  • TRUE OR FALSE

Quoted text.

 false
line-height string
  • tight, regular, loose

Line height in context of the typographic design.

 regular
letter-spacing string
  • narrow, regular, wide

Letter spacing in context of the typographic design.

 regular
text-transform string
  • regular, uppercase, lowercase, capitalize

Transform controls the type case. Please note that capitalize would capitalize the first letter of each word, it is not the same as title case.

 regular
font-family string
  • headline, body, code

Font family in context of the typographic design.

 body
font-size string
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge

Font size in context of the typographic design.

 medium
font-weight string
  • regular, semibold, bold

Font weight in context of the typographic design.

 regular
font-style string
  • regular OR italic

Emphasized text.

 regular
headline boolean
  • TRUE OR FALSE

A preset for headlines in context of the typographic design.

 false
subheadline boolean
  • TRUE OR FALSE

A preset for subheadlines in context of the typographic design.

 false
eyebrow boolean
  • TRUE OR FALSE

A preset for eyebrow in context of the typographic design.

 false
url string

If provided, turns headline into a link to given url.

 N/A
util array

Each item in the array will build a utility class. No need to include u-bolt-. For the web component use comma separated string.

 N/A

text

Web Component Usage Bolt Text is a web component, you can simply use <bolt-text> in the markup to make it render.
This is text.
<bolt-text> This is text. </bolt-text>

text typographic recipes

Typographic Design The following are the official recipes for each piece of our typography. They will cover all common use cases. Only in edge cases, you'd want to break away and create your own recipes. Headlines
This Is the XXXLarge Headline This Is the XXLarge Headline This Is the XLarge Headline This Is the Large Headline This Is the Small Headline This Is the XSmall Headline
<bolt-text headline font-size="xxxlarge"> This Is the XXXLarge Headline </bolt-text> <bolt-text headline font-size="xxlarge"> This Is the XXLarge Headline </bolt-text> <bolt-text headline font-size="xlarge"> This Is the XLarge Headline </bolt-text> <bolt-text headline font-size="large"> This Is the Large Headline </bolt-text> <bolt-text headline font-size="small"> This Is the Small Headline </bolt-text> <bolt-text headline font-size="xsmall" text-transform="uppercase" letter-spacing="wide"> This Is the XSmall Headline </bolt-text>
Subheadlines
This Is the XXLarge Subheadline This Is the XLarge Subheadline This Is the Large Subheadline
<bolt-text subheadline font-size="xxlarge"> This Is the XXLarge Subheadline </bolt-text> <bolt-text subheadline font-size="xlarge"> This Is the XLarge Subheadline </bolt-text> <bolt-text subheadline font-size="large"> This Is the Large Subheadline </bolt-text>
Eyebrow
This Is the Eyebrow
<bolt-text eyebrow> This Is the Eyebrow </bolt-text>
Teaser Teaser is a combination of text with clear information architecture. It is commonly used as a quick summary that draws the reader to a longer piece of content.
This is an eyebrow This is a headline This is a subheadline This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.
<bolt-text eyebrow> This is an eyebrow </bolt-text> <bolt-text headline font-size="xxxlarge"> This is a headline </bolt-text> <bolt-text subheadline font-size="xxlarge"> This is a subheadline </bolt-text> <bolt-text> This is regular text, and some lorem ipsum. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante. </bolt-text>

text tag variations

Tag Usage <bolt-text> allows for separation of semantics and visual. Using a semantically correct tag will not affect the appearance of the text.
This text has its tag prop defined as: h1
<bolt-text tag="h1"> This text has its tag prop defined as: h1 </bolt-text>
This text has its tag prop defined as: h2
<bolt-text tag="h2"> This text has its tag prop defined as: h2 </bolt-text>
This text has its tag prop defined as: h3
<bolt-text tag="h3"> This text has its tag prop defined as: h3 </bolt-text>
This text has its tag prop defined as: h4
<bolt-text tag="h4"> This text has its tag prop defined as: h4 </bolt-text>
This text has its tag prop defined as: h5
<bolt-text tag="h5"> This text has its tag prop defined as: h5 </bolt-text>
This text has its tag prop defined as: h6
<bolt-text tag="h6"> This text has its tag prop defined as: h6 </bolt-text>
This text has its tag prop defined as: p
<bolt-text tag="p"> This text has its tag prop defined as: p </bolt-text>
This text has its tag prop defined as: div
<bolt-text tag="div"> This text has its tag prop defined as: div </bolt-text>
This text has its tag prop defined as: span
<bolt-text tag="span"> This text has its tag prop defined as: span </bolt-text>
This text has its tag prop defined as: cite
<bolt-text tag="cite"> This text has its tag prop defined as: cite </bolt-text>

text display variations

Display Usage <bolt-text> can be defined as a paragraph of text (block display) or a piece of inline text (inline display).
This paragraph of text has block display, which means it will take up the full width of its container. This paragraph of text also has block display, but within this paragraph, certain text can be inline display, and it can be styled differently than the rest of the paragraph.
<bolt-text display="block"> This paragraph of text has block display, which means it will take up the full width of its container. </bolt-text> <bolt-text display="block"> This paragraph of text also has block display, but within this paragraph, certain text can be <bolt-text display="inline" font-weight="bold" text-transform="uppercase">inline display</bolt-text>, and it can be styled differently than the rest of the paragraph. </bolt-text>

text color variations

Color Usage <bolt-text> can be colored accordingly based on theming. It can either take on a particular theme's headline color or body text color.
This text has its color prop defined as: theme-headline
<bolt-text color="theme-headline" font-weight="bold" font-size="large"> This text has its color prop defined as: theme-headline </bolt-text>
This text has its color prop defined as: theme-body
<bolt-text color="theme-body" font-weight="bold" font-size="large"> This text has its color prop defined as: theme-body </bolt-text>

text align variations

Align Usage <bolt-text> can be aligned horizontally. This only applies if display is set to block.
This text has its align prop defined as: inherit
<bolt-text display="block" align="inherit"> This text has its align prop defined as: inherit </bolt-text>
This text has its align prop defined as: start
<bolt-text display="block" align="start"> This text has its align prop defined as: start </bolt-text>
This text has its align prop defined as: center
<bolt-text display="block" align="center"> This text has its align prop defined as: center </bolt-text>
This text has its align prop defined as: end
<bolt-text display="block" align="end"> This text has its align prop defined as: end </bolt-text>

text opacity variations

Opacity Usage <bolt-text> can be adjusted in terms of opacity. The options are synced with Bolt's opacity scale.
This text has its opacity prop defined as: 100
<bolt-text opacity="100"> This text has its opacity prop defined as: 100 </bolt-text>
This text has its opacity prop defined as: 80
<bolt-text opacity="80"> This text has its opacity prop defined as: 80 </bolt-text>
This text has its opacity prop defined as: 60
<bolt-text opacity="60"> This text has its opacity prop defined as: 60 </bolt-text>
This text has its opacity prop defined as: 40
<bolt-text opacity="40"> This text has its opacity prop defined as: 40 </bolt-text>
This text has its opacity prop defined as: 20
<bolt-text opacity="20"> This text has its opacity prop defined as: 20 </bolt-text>

text quoted

Quote Usage <bolt-text> can be turned into a quote by using the quoted boolean prop.
This text is quoted. This headline text is also quoted.
<bolt-text quoted> This text is quoted. </bolt-text> <bolt-text headline quoted> This headline text is also quoted. </bolt-text>

text line height variations

Line-height Usage <bolt-text> has a few options for leading (line-height). Leading can be adjusted for legibility. The default is regular.
This text has
its line-height
prop defined as:
tight
<bolt-text line-height="tight"> This text has<br> its line-height<br> prop defined as:<br> tight </bolt-text>
This text has
its line-height
prop defined as:
regular
<bolt-text line-height="regular"> This text has<br> its line-height<br> prop defined as:<br> regular </bolt-text>
This text has
its line-height
prop defined as:
loose
<bolt-text line-height="loose"> This text has<br> its line-height<br> prop defined as:<br> loose </bolt-text>

text letter spacing variations

Letter-spacing Usage <bolt-text> has a few options for the spacing in between letters. It can be adjusted for legibility. The default is regular.
This text has its letter-spacing prop defined as: narrow
<bolt-text letter-spacing="narrow"> This text has its letter-spacing prop defined as: narrow </bolt-text>
This text has its letter-spacing prop defined as: regular
<bolt-text letter-spacing="regular"> This text has its letter-spacing prop defined as: regular </bolt-text>
This text has its letter-spacing prop defined as: wide
<bolt-text letter-spacing="wide"> This text has its letter-spacing prop defined as: wide </bolt-text>

text transform variations

Text-transform Usage <bolt-text> has a few options for transforming letter case. It can be adjusted for legibility. The default is regular.
This text has its text-transform prop defined as: regular
<bolt-text text-transform="regular"> This text has its text-transform prop defined as: regular </bolt-text>
This text has its text-transform prop defined as: uppercase
<bolt-text text-transform="uppercase"> This text has its text-transform prop defined as: uppercase </bolt-text>
This text has its text-transform prop defined as: lowercase
<bolt-text text-transform="lowercase"> This text has its text-transform prop defined as: lowercase </bolt-text>
This text has its text-transform prop defined as: capitalize
<bolt-text text-transform="capitalize"> This text has its text-transform prop defined as: capitalize </bolt-text>

text font family variations

Font-family Usage <bolt-text> has a few options to change typefaces. These options are relative to the types of text such as heading, body, and code. Each type is linked to a specific typeface. This method accounts for our evolving brand.
This text has its font-family prop defined as: headline
<bolt-text font-family="headline"> This text has its font-family prop defined as: headline </bolt-text>
This text has its font-family prop defined as: body
<bolt-text font-family="body"> This text has its font-family prop defined as: body </bolt-text>
This text has its font-family prop defined as: code
<bolt-text font-family="code"> This text has its font-family prop defined as: code </bolt-text>

text font size variations

Font-size Usage <bolt-text> has font-size options to indicate information hierarchy.
This text has its font-size prop defined as: xsmall
<bolt-text font-size="xsmall"> This text has its font-size prop defined as: xsmall </bolt-text>
This text has its font-size prop defined as: small
<bolt-text font-size="small"> This text has its font-size prop defined as: small </bolt-text>
This text has its font-size prop defined as: medium
<bolt-text font-size="medium"> This text has its font-size prop defined as: medium </bolt-text>
This text has its font-size prop defined as: large
<bolt-text font-size="large"> This text has its font-size prop defined as: large </bolt-text>
This text has its font-size prop defined as: xlarge
<bolt-text font-size="xlarge"> This text has its font-size prop defined as: xlarge </bolt-text>
This text has its font-size prop defined as: xxlarge
<bolt-text font-size="xxlarge"> This text has its font-size prop defined as: xxlarge </bolt-text>
This text has its font-size prop defined as: xxxlarge
<bolt-text font-size="xxxlarge"> This text has its font-size prop defined as: xxxlarge </bolt-text>

text font style variations

Font-style Usage <bolt-text> has font-style options to indicate simple emphasis.
This text has its font-style prop defined as: regular
<bolt-text font-style="regular"> This text has its font-style prop defined as: regular </bolt-text>
This text has its font-style prop defined as: italic
<bolt-text font-style="italic"> This text has its font-style prop defined as: italic </bolt-text>

text font weight variations

Font-weight Usage <bolt-text> has font-weight options to indicate emphasis hierarchy.
This text has its font-weight prop defined as: regular
<bolt-text font-weight="regular"> This text has its font-weight prop defined as: regular </bolt-text>
This text has its font-weight prop defined as: semibold
<bolt-text font-weight="semibold"> This text has its font-weight prop defined as: semibold </bolt-text>
This text has its font-weight prop defined as: bold
<bolt-text font-weight="bold"> This text has its font-weight prop defined as: bold </bolt-text>

text ssr with twig filter

Server-side Rendered Web Components (Experimental) The <bolt-text> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
This is text.
{% filter bolt_ssr %} <bolt-text> This is text. </bolt-text> {% endfilter %}