text

text docs

2.16.1

Text

Text Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-text
Source code
View on Github
Dependencies

Overview

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

  <bolt-text>
  This is text.
</bolt-text>

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

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

 object —
  • —
Text *

Text content of the headline.

 string —
  • —
Tag

HTML semantic tags.

 string p
  • h1, h2, h3, h4, h5, h6, p, div, span, cite
Display

Inline text or a block of text.

 string block
  • inline or block
Color

Text color in context of theme colors.

 string theme-body
  • theme-headline or theme-body
Align

Text alignment.

 string inherit
  • inherit, start, center, end
Opacity

Opacity level.

 number 100
  • 100, 80, 60, 40, 20
Quoted

Quoted text.

 boolean false
  • true or false
Line-height

Line height in context of the typographic design.

 string regular
  • tight, regular, loose
Letter-spacing

Letter spacing in context of the typographic design.

 string regular
  • narrow, regular, wide
Text-transform

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.

 string regular
  • regular, uppercase, lowercase, capitalize
Font-family

Font family in context of the typographic design.

 string body
  • headline, body, code
Font-size

Font size in context of the typographic design.

 string medium
  • xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
Font-weight

Font weight in context of the typographic design.

 string regular
  • regular, semibold, bold
Font-style

Emphasized text.

 string regular
  • regular or italic
Headline

A preset for headlines in context of the typographic design.

 boolean false
  • true or false
Subheadline

A preset for subheadlines in context of the typographic design.

 boolean false
  • true or false
Eyebrow

A preset for eyebrow in context of the typographic design.

 boolean false
  • true or false
Url

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

 string —
  • —
Util

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

 array —
  • —

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 %}
Debug Panel