Bolt Design System

Twig Usage

{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a type element.'
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this element.	`object`	—	—
content	Content of the type element.	`any`	—	—
tag	Set the semantic tag for the type element. Use `span` for inline text; use `p`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `div` for block text. There is no restrictions with this prop, developers must understand semantic HTML to apply the appropriate tag based on the use case.	`string`	`p`	—
size	Control the font-size. If size is not defined or set to auto, font-size inherits from parent container.	`string`	`auto`	`auto`, `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`
hierarchy	Control the hierarch of text. Each option comes with specific typographic styles.	`string`	`body`	`body`, `headline`, `subheadline`, `eyebrow`
icon_before	Append an icon before the text. Icon element is recommended. However, <img> elements are also acceptable.	`any`	—	—
icon_after	Append an icon after the text. Icon element is recommended. However, <img> elements are also acceptable.	`any`	—	—

Install

npm install @bolt/elements-type

Dependencies

@bolt/core-v3.x

Type