article

article docs

Article

An editorial container that styles children HTML elements.

Published Last updated: 4.2.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-elements-article/article.twig' with {
  content: 'This is an article.',
} only %}
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 —
  • —
content *

Content of the article.

 any —
  • —
tag

Set the HTML tag for the content container.

 string article
  • article or div
Install Install 
  npm install @bolt/elements-article
Dependencies @bolt/core-v3.x

article

Basic Article An Article element can be used for any free-form content areas where a WYSIWYG editor is enabled. Basic HTML elements are styled within the Article element. Important Notes: Even though plain <table> elements are styled, they are not responsive. Please wrap all <table> elements with <bolt-table> web component to enable responsive styles (JavaScript required). View Table Component As for <pre> and <code> elements, they do not have syntax highlighting. To enable syntax highlighting, please use <bolt-code-snippet> web component instead (JavaScript required). View Code Snippet Component Demo

The is a list of all supported plain HTML elements:

  • p
  • dl
  • ol
  • ul
  • header
  • section
  • h1 ~ h6
  • blockquote
  • details
  • figure
  • small
  • table
  • code
  • kbd
  • pre
  • hr

The following is a kitchen sink of all supported plain HTML elements:

H1 heading text

H2 heading text

H3 heading text

H4 heading text

H5 heading text
H6 heading text

Text: bold, italic, linked, code, kbd, small, superscript, subscript.

  • First level unordered item
  • First level unordered item
    1. Second level ordered item
      • Third level unordered item
      • Third level unordered item
    2. Second level ordered item
  • First level unordered item
  1. First level ordered item
  2. First level ordered item
    • Second level unordered item
      1. Third level ordered item
      2. Third level ordered item
    • Second level unordered item
  3. First level ordered item
Summary sums up the details

Details elaborate on the summary.

Definition list
A list of text and description.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
pre {
  padding: .5em 1em; color: black; border-left: 5px solid; background-color: white;
}

Pull Quote. Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.

The time is always right to do what is right.

Figure caption
Col1 Col2 Col3
Row1 Row1 Row1
Row2 Row2 Row2
Twig
// Render content {% set article_content %} <h1> H1 heading text </h1> <h2> H2 heading text </h2> <h3> H3 heading text </h3> <h4> H4 heading text </h4> <h5> H5 heading text </h5> <h6> H6 heading text </h6> <p> Text: <strong>bold</strong>, <em>italic</em>, <a href="#!">linked</a>, <code>code</code>, <kbd>kbd</kbd>, <small>small</small>, super<sup>script</sup>, sub<sub>script</sub>. </p> {% endset %} // Pass content to the component and set proper HTML tag {% include '@bolt-elements-article/article.twig' with { content: article_content, tag: 'article', } only %}
HTML
<article class="e-bolt-article"> <h1> H1 heading text </h1> <h2> H2 heading text </h2> <h3> H3 heading text </h3> <h4> H4 heading text </h4> <h5> H5 heading text </h5> <h6> H6 heading text </h6> <p> Text: <strong>bold</strong>, <em>italic</em>, <a href="#!">linked</a>, <code>code</code>, <kbd>kbd</kbd>, <small>small</small>, super<sup>script</sup>, sub<sub>script</sub>. </p> </article>