Article

Here is a demo of generic article layout. A article may consist of different elements -

Article header This is a subheader

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod iusto totam consequatur consequuntur modi libero vel nostrum, molestias ab dolorem officia dignissimos at, sed cumque adipisci. Iure quis facere, a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos nisi labore soluta velit deleniti, dolor, sequi tenetur ipsa iste cupiditate nemo voluptatum ad repellendus eveniet quod consequuntur, a architecto laborum, provident distinctio autem deserunt illum. Tempora quis quae, laudantium adipisci sapiente ut totam perspiciatis dolorem nemo natus animi error unde mollitia, ipsum voluptates, qui aspernatur magni debitis non eum aperiam amet neque, quo sint. Deserunt quam porro fugiat, totam ipsa laboriosam id eius explicabo odio, nulla iste nihil suscipit in. Non assumenda expedita placeat libero, neque ex animi, laudantium reprehenderit accusamus rerum est, aperiam minima modi esse vel quisquam.

A caption for the above image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt non consequatur dolorum, molestias unde placeat minima culpa? Perspiciatis id est illum, quaerat a unde in dignissimos cumque, nisi rem similique atque quis doloribus cum ea eos ut temporibus natus necessitatibus! Maiores nobis nemo, provident, iure vel soluta voluptates facilis dolorum consequatur suscipit eos non eius corporis. Voluptates, incidunt officiis possimus rem magnam labore vero earum quos voluptatibus, doloremque numquam tenetur, ex iure commodi illo molestias ullam adipisci! Consequatur minus voluptate facere sit, doloribus laboriosam quia dolores. Porro aperiam sit repudiandae odit cupiditate soluta nisi debitis, excepturi deleniti dolores, odio voluptas nam laudantium magnam, minima provident vero commodi velit esse numquam recusandae quod alias dolore. Eaque nulla repudiandae, similique, libero ullam dolorum ex? Reiciendis magnam voluptate voluptas quia, quas ab eveniet, dolorum debitis unde, repudiandae similique optio nam atque eius architecto, quae? Odit nesciunt, provident voluptate laborum rerum mollitia tenetur ea.

<figure class="fig">
    <img src="http://placehold.it/600x200" alt="" class="img">
    <figcaption class="fig-caption">A caption for the above image.</figcaption>
</figure>
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Aliquam tincidunt mauris eu risus.
    • Quae at provident aperiam mollitia?
    • Ipsum voluptatum quam nulla cumque voluptas nobis et
    • Sit laudantium error optio laborum quae at provident aperiam mollitia?
  • Vestibulum auctor dapibus neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum amet quibusdam possimus in, quam delectus veniam commodi ea nemo excepturi est, suscipit impedit ut labore similique dignissimos maiores temporibus voluptatem!

Lorem Ipsum Today
The passage continues to see frequent usage, with Lorem Ipsum text appearing often in print, graphic and web designs.
Original Lorem Ipsum Text
Here are the original Latin passages from which Lorem Ipsum was derived, paired with their 1914 translations by H. Rackham.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, nesciunt, reiciendis. Ad minus autem, totam aliquam, officiis laborum nihil voluptatem eos quo cum natus nam eum accusamus, asperiores atque tempore mollitia? Perspiciatis laboriosam beatae esse facilis saepe ipsa illum doloremque doloribus natus nihil labore expedita assumenda nemo, alias deleniti eaque, inventore sunt autem animi ex. Debitis quas quasi quisquam illo eos et saepe optio excepturi, autem modi maiores, officia iste, quam cum numquam, nam omnis qui quibusdam aspernatur nihil repellendus? Nulla, magni, labore? Porro ut nemo ipsa, dignissimos, sunt deleniti ipsum nulla eligendi quo explicabo neque cumque excepturi, ad ex!

Last updated 23 min ago

<article class="article">
    <h3 class="article-header">Article header <span class="article-subheader blocked">This is a subheader</span></h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod iusto totam consequatur consequuntur modi libero vel nostrum, molestias ab dolorem officia dignissimos at, sed cumque adipisci. Iure quis facere, a!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos nisi labore soluta velit deleniti, dolor, sequi tenetur ipsa iste cupiditate nemo voluptatum ad repellendus eveniet quod <code>consequuntur</code>, a architecto laborum, provident distinctio autem deserunt illum. Tempora quis quae, laudantium adipisci sapiente ut totam perspiciatis dolorem nemo natus animi error unde <abbr title="mollitia">mollitia</abbr>, ipsum voluptates, qui aspernatur <u>magni</u> debitis non eum aperiam amet neque, quo sint. Deserunt quam porro fugiat, totam ipsa laboriosam id eius explicabo odio, nulla iste nihil suscipit in. Non assumenda expedita placeat libero, neque ex animi, laudantium reprehenderit accusamus rerum est, aperiam minima modi esse vel quisquam.</p>

    <figure class="fig">
        <img src="http://placehold.it/600x200" alt="" class="img">
        <figcaption class="fig-caption">A caption for the above image.</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt non consequatur dolorum, molestias unde placeat minima culpa? Perspiciatis id est illum, quaerat a unde in dignissimos cumque, nisi rem similique atque quis doloribus cum ea eos ut temporibus natus necessitatibus! Maiores nobis nemo, provident, iure vel soluta voluptates facilis dolorum consequatur suscipit eos non eius corporis. Voluptates, incidunt officiis possimus rem magnam labore vero earum quos voluptatibus, doloremque numquam tenetur, ex iure commodi illo molestias ullam adipisci! Consequatur minus voluptate facere sit, doloribus laboriosam quia dolores. Porro aperiam sit repudiandae odit cupiditate soluta nisi debitis, excepturi deleniti dolores, odio voluptas nam laudantium magnam, minima provident vero commodi velit esse numquam recusandae quod alias dolore. Eaque nulla repudiandae, similique, libero ullam dolorum ex? Reiciendis magnam voluptate voluptas quia, quas ab eveniet, dolorum debitis unde, repudiandae similique optio nam atque eius architecto, quae? Odit nesciunt, provident voluptate laborum rerum mollitia tenetur ea.</p>

    <pre><code>&lt;figure class=&quot;fig&quot;&gt;
&lt;img src=&quot;http://placehold.it/600x200&quot; alt=&quot;&quot; class=&quot;img&quot;&gt;
&lt;figcaption class=&quot;fig-caption&quot;&gt;A caption for the above image.&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

    <ul class="list">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.
            <ul>
                <li>Quae at provident aperiam mollitia?</li>
                <li>Ipsum voluptatum quam nulla cumque voluptas nobis et</li>
                <li>Sit laudantium error optio laborum quae at provident aperiam mollitia?</li>
            </ul>
        </li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum amet quibusdam possimus in, quam delectus veniam commodi ea nemo excepturi est, suscipit impedit ut labore similique dignissimos maiores temporibus voluptatem!</p>

    <dl>
        <dt>Lorem Ipsum Today</dt>
        <dd>The passage continues to see frequent usage, with Lorem Ipsum text appearing often in print, graphic and web designs.</dd>
        <dt>Original Lorem Ipsum Text</dt>
        <dd>Here are the original Latin passages from which Lorem Ipsum was derived, paired with their 1914 translations by H. Rackham.</dd>
    </dl>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, nesciunt, reiciendis. Ad minus autem, totam aliquam, officiis laborum nihil voluptatem eos quo cum natus nam eum accusamus, asperiores atque tempore mollitia? Perspiciatis laboriosam beatae esse facilis saepe ipsa illum doloremque doloribus natus nihil labore expedita assumenda nemo, alias deleniti eaque, inventore sunt autem animi ex. Debitis quas quasi quisquam illo eos et saepe optio excepturi, autem modi maiores, officia iste, quam cum numquam, nam omnis qui quibusdam aspernatur nihil repellendus? Nulla, magni, labore? Porro ut nemo ipsa, dignissimos, sunt deleniti ipsum nulla eligendi quo explicabo neque cumque excepturi, ad ex!</p>

    <p><small class="dimmed">Last updated 23 min ago</small></p>
</article>

There is a fancy style for article comes with roolith css using css grid. Add article-primary class name to your existing article class. All fig and blockquoteclass will be full width by default and aside tag will behave like note! See below -



Article header This is a subheader

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod iusto totam consequatur consequuntur modi libero vel nostrum, molestias ab dolorem officia dignissimos at, sed cumque adipisci. Iure quis facere, a!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos nisi labore soluta velit deleniti, dolor, sequi tenetur ipsa iste cupiditate nemo voluptatum ad repellendus eveniet quod consequuntur, a architecto laborum, provident distinctio autem deserunt illum. Tempora quis quae, laudantium adipisci sapiente ut totam perspiciatis dolorem nemo natus animi error unde mollitia, ipsum voluptates, qui aspernatur magni debitis non eum aperiam amet neque, quo sint. Deserunt quam porro fugiat, totam ipsa laboriosam id eius explicabo odio, nulla iste nihil suscipit in. Non assumenda expedita placeat libero, neque ex animi, laudantium reprehenderit accusamus rerum est, aperiam minima modi esse vel quisquam.

A caption for the above image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt non consequatur dolorum, molestias unde placeat minima culpa? Perspiciatis id est illum, quaerat a unde in dignissimos cumque, nisi rem similique atque quis doloribus cum ea eos ut temporibus natus necessitatibus! Maiores nobis nemo, provident, iure vel soluta voluptates facilis dolorum consequatur suscipit eos non eius corporis. Voluptates, incidunt officiis possimus rem magnam labore vero earum quos voluptatibus, doloremque numquam tenetur, ex iure commodi illo molestias ullam adipisci! Consequatur minus voluptate facere sit, doloribus laboriosam quia dolores. Porro aperiam sit repudiandae odit cupiditate soluta nisi debitis, excepturi deleniti dolores, odio voluptas nam laudantium magnam, minima provident vero commodi velit esse numquam recusandae quod alias dolore. Eaque nulla repudiandae, similique, libero ullam dolorum ex? Reiciendis magnam voluptate voluptas quia, quas ab eveniet, dolorum debitis unde, repudiandae similique optio nam atque eius architecto, quae? Odit nesciunt, provident voluptate laborum rerum mollitia tenetur ea.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Aliquam tincidunt mauris eu risus.
    • Quae at provident aperiam mollitia?
    • Ipsum voluptatum quam nulla cumque voluptas nobis et
    • Sit laudantium error optio laborum quae at provident aperiam mollitia?
  • Vestibulum auctor dapibus neque.
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt. H. Rackham

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum amet quibusdam possimus in, quam delectus veniam commodi ea nemo excepturi est, suscipit impedit ut labore similique dignissimos maiores temporibus voluptatem!

Last updated 23 min ago

<article class="article article-primary">
    <h3 class="article-header">Article header <span class="article-subheader blocked">This is a subheader</span></h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod iusto totam consequatur consequuntur modi libero vel nostrum, molestias ab dolorem officia dignissimos at, sed cumque adipisci. Iure quis facere, a!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos nisi labore soluta velit deleniti, dolor, sequi tenetur ipsa iste cupiditate nemo voluptatum ad repellendus eveniet quod <code>consequuntur</code>, a architecto laborum, provident distinctio autem deserunt illum. Tempora quis quae, laudantium adipisci sapiente ut totam perspiciatis dolorem nemo natus animi error unde <abbr title="mollitia">mollitia</abbr>, ipsum voluptates, qui aspernatur <u>magni</u> debitis non eum aperiam amet neque, quo sint. Deserunt quam porro fugiat, totam ipsa laboriosam id eius explicabo odio, nulla iste nihil suscipit in. Non assumenda expedita placeat libero, neque ex animi, laudantium reprehenderit accusamus rerum est, aperiam minima modi esse vel quisquam.</p>

    <figure class="fig">
        <img src="http://placehold.it/1400x500" alt="" class="img-full-width">
        <figcaption class="fig-caption">A caption for the above image.</figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt non consequatur dolorum, molestias unde placeat minima culpa? Perspiciatis id est illum, quaerat a unde in dignissimos cumque, nisi rem similique atque quis doloribus cum ea eos ut temporibus natus necessitatibus! Maiores nobis nemo, provident, iure vel soluta voluptates facilis dolorum consequatur suscipit eos non eius corporis. Voluptates, incidunt officiis possimus rem magnam labore vero earum quos voluptatibus, doloremque numquam tenetur, ex iure commodi illo molestias ullam adipisci! Consequatur minus voluptate facere sit, doloribus laboriosam quia dolores. Porro aperiam sit repudiandae odit cupiditate soluta nisi debitis, excepturi deleniti dolores, odio voluptas nam laudantium magnam, minima provident vero commodi velit esse numquam recusandae quod alias dolore. Eaque nulla repudiandae, similique, libero ullam dolorum ex? Reiciendis magnam voluptate voluptas quia, quas ab eveniet, dolorum debitis unde, repudiandae similique optio nam atque eius architecto, quae? Odit nesciunt, provident voluptate laborum rerum mollitia tenetur ea.</p>

    <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</aside>

    <ul class="list">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.
            <ul>
                <li>Quae at provident aperiam mollitia?</li>
                <li>Ipsum voluptatum quam nulla cumque voluptas nobis et</li>
                <li>Sit laudantium error optio laborum quae at provident aperiam mollitia?</li>
            </ul>
        </li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>

    <blockquote>
        Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.
        <cite>H. Rackham</cite>
    </blockquote>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum amet quibusdam possimus in, quam delectus veniam commodi ea nemo excepturi est, suscipit impedit ut labore similique dignissimos maiores temporibus voluptatem!</p>

    <p><small class="dimmed">Last updated 23 min ago</small></p>
</article>