Article

<article>
    <p>Amet nemo laborum sequi qui harum. Amet at voluptatibus veniam officiis ea. Maxime voluptas dolore dolor mollitia quo ab eaque accusamus voluptas. Quibusdam reprehenderit amet ullam accusantium est Eveniet dicta?</p>
    <p>Elit neque laborum libero eligendi quod minus quisquam. Illum quod dolor ad in repellat, aliquid vitae Debitis quasi soluta cupiditate praesentium optio? Asperiores voluptates quaerat placeat totam voluptates? Aperiam inventore.</p>
</article>
<article>
  {{#> @partial-block}}
    <p>Amet nemo laborum sequi qui harum. Amet at voluptatibus veniam officiis ea. Maxime voluptas dolore dolor mollitia quo ab eaque accusamus voluptas. Quibusdam reprehenderit amet ullam accusantium est Eveniet dicta?</p>
    <p>Elit neque laborum libero eligendi quod minus quisquam. Illum quod dolor ad in repellat, aliquid vitae Debitis quasi soluta cupiditate praesentium optio? Asperiores voluptates quaerat placeat totam voluptates? Aperiam inventore.</p>
  {{/ @partial-block}}
</article>
/* No context defined. */
  • Content:
    /**
     * Simple article container
     *
     * Utilizes a max-width for easier reading,
     * hence it’s most suitable for flowing text.
     */
    
    @media screen {
    
      article {
        max-width: 36em;
      }
    
      article.article-wide {
        max-width: 54em;
      }
    }
    
  • URL: /components/raw/article/article.css
  • Filesystem Path: components/02_molecules/article/article.css
  • Size: 239 Bytes

Article containers

Regular article

Recommended for use with flowing text since it keeps paragraphs to a comfortable width.

{{> @article }}

Wide article

Recommended for other uses where there’s no need to cover the full width of the viewport.

{{> @article--wide }}