article

article docs

Article

An editorial container that styles children HTML elements.

Published Last updated: 4.6.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 <code> 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>