Web Style Guide
Menu
Search
HomeTemplates

Article page

An article page is...

Quick access

Usage
HTML structurePresetsVariations
Advanced settings

Presets

?
PresetDescription
DefaultDefault template.

Templates variations

?
VariationDescription
DefaultDefault variation.
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum
NOT AN EXPERT? CHECK EXPLAINER
LEARN MORE
Lorem ipsum dolor sit amet?
title

Variations

Modifiers

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

summary-bullets

Variations

Modifiers

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
section

Variations

Modifiers

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

splitter

Variations

Modifiers

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

section

Variations

Modifiers

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

contact-box

Variations

Modifiers

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum
explainer-box

Variations

Modifiers

NOT AN EXPERT? CHECK EXPLAINER
LEARN MORE
Lorem ipsum dolor sit amet?
HTML
Copy to clipboard
<div class="title">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <h1>Lorem ipsum dolor sit amet</h1>
</div><div class="summary-bullets">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.</li>
    </ul>
</div><div class="section">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><div class="splitter">
    <div class="content-box">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div><div class="section">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><div class="contact-box" data-image-webp="/styleguide/shared/img/light_2560x750.webp" data-image="/styleguide/shared/img/light_2560x750.jpg">
    <div class="content-box">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="button-box">
            <a class="button" href="#">Lorem ipsum</a>
        </div>
    </div>
</div><div class="explainer-box" data-image-webp="/styleguide/shared/img/light_2560x750.webp" data-image="/styleguide/shared/img/light_2560x750.jpg">
    <div class="wrapper">
        <div class="bubble-box">NOT AN EXPERT? <strong>CHECK EXPLAINER</strong></div>
        <a href="#"><div><span>LEARN MORE</span></div>Lorem ipsum dolor sit amet?</a>
    </div>
</div>
Interactive viewUsageHTML structurePresetsVariationsTest pageGo to top

Details

Usage

The article page...

HTML structure

Presets

Article page templates:

PresetDescription
DefaultDefault template.

Variations

Article page variations:

VariationDescription
DefaultDefault variation.

Our website uses cookies

We are always working to improve this website for our users. To do this, we use the anonymous data provided by cookies.
Learn more about how we use cookies

I understand and I accept the use of cookies I do not accept the use of cookies