Skip Navigation

Photo by Jenna Brummond  on Unsplash

Articles

The article component offers responsive two and three column layouts. It includes fixed-width sidebars.

Containing Elements

The article component is made up of three preassigned areas: header, sidebar, and body.

Unlike other Natura11y components, articles do not provide breakpoint modifiers. Instead, its layout changes from mobile to desktop view at the large viewport (1000px). For three-column layouts, the layout changes again at the extra-large viewport.

Header

.article__Header

Body

.article__body

Figure 1 (below) provides the HTML for the article component's containing selectors. The parent class .article--column-2 (line 1) sets the two-column layout.

<article class="article--column-2">

    <div class="article__header">
        ...
    </div>

    <div class="article__sidebar">
        ...
    </div>

    <div class="article__body">
        ...
    </div>

</article>
Figure 1
Line #Details
1

The parent .article--column-{x} selector is required.

Here x equals the amount of columns (either 2 or 3).

3-5

The .article__header selector is optional.

It holds the article's header tag.

7-9

The .article__sidebar selector is required.

It holds the article's sidebar or navigation content.

11-13

The .article__body selector is required.

It holds the article's main content.

Three column layouts use the .article--column-3 parent selector (Figure 2, line 1). They include a third .article__sidebar child selector (Figure 2, lines 15-17).

Header

.article__Header

Body

.article__body

<article class="article--column-3">

    <div class="article__header">
        ...
    </div>

    <div class="article__sidebar">
        ...
    </div>

    <div class="article__body">
        ...
    </div>

    <div class="article__related">
        ...
    </div>

</article>
Figure 2

Layout With Sample Content

Consider the following two-column article layout. A backdrop component is present in the .article__header selector. The article__sidebar contains generic navigation. Finally, article__body has some generic content.

Globe Artichoke

Cynara cardunculus

The globe artichoke (Cynara cardunculus), also known by the names French artichoke and green artichoke, is a variety of a species of thistle cultivated as a food. The edible portion of the plant consists of the flower buds before the flowers come into bloom. The budding artichoke flower-head is a cluster of many budding small flowers (an inflorescence), together with many bracts, on an edible base.

Once the buds bloom, the structure changes to a coarse, barely edible form. Another variety of the same species is the cardoon, a perennial plant native to the Mediterranean region. Both wild forms and cultivated varieties (cultivars) exist.

Agricultural output

Cultivation of the globe artichoke is concentrated in the Americas and the countries bordering the Mediterranean basin. The main European producers are Italy, Spain, and France and the main American producers are Argentina, Peru and the United States.

In the United States, California provides nearly 100% of the U.S. crop, with about 80% of that being grown in Monterey County; there, Castroville proclaims itself to be "The Artichoke Center of the World" and holds the annual Castroville Artichoke Festival. More recently, artichokes have been grown in South Africa in a small town called Parys, located along the Vaal River.

In 2019, the world produced approximately 1.6 million tons of artichokes.

Top 5 globe artichoke producers in 2017
CountryProduction (tonnes)
Italy387,803
Spain223,150
Egypt185,695
Peru145,068
Argentina108,683

Header with Backdrop

With the example below, the backdrop component is a direct child of the .article__header selector. When this is the case, a left margin is placed on the first child of the .backdrop__cover selector. This margin equals the width of the article's sidebar.

<article class="article--column-2">

    <aside class="article__sidebar">

        <ul class="nav nav--divider position-sticky-top">
            <li>
                <a href="#1" aria-current="page">Link</a>
            </li>
            <li>
                <a href="#1">Link</a>
            </li>
            <li>
                <a href="#1">Link</a>
            </li>
        </ul>

    </aside>

    <header class="article__header">

        <div class="backdrop backdrop--fixed theme-dark">

            <div class="backdrop__image">
                <img class="opacity-50" src="https://via.placeholder.com/1500x750" alt="Placeholder" />
            </div>

            <div class="backdrop__cover">
                <div class="margin-y-4">
                    <div class="container narrow">
                        <p class="h1 text-shadow">
                            Cynara cardunculus
                        </p>
                    </div>
                </div>
            </div>

        </div>

    </header>

    <div class="article__body border-left">

        <div class="container narrow margin-y-5">

            <h2>Globe Artichoke</h2>

            <p>
                The globe artichoke (Cynara cardunculus), also known by the names French artichoke and green artichoke, is a variety of a species of <a href="#1">thistle</a> cultivated as a food. The edible portion of the plant consists of the flower buds before the flowers come into bloom. The budding artichoke flower-head is a cluster of many budding small flowers (an inflorescence), together with many bracts, on an edible base.
            </p>

            <p>
                Once the buds bloom, the structure changes to a coarse, barely edible form. Another variety of the same species is the cardoon, a perennial plant native to the Mediterranean region. Both wild forms and cultivated varieties (cultivars) exist.
            </p>

            ...

        </div>

    </div>

</article>
Figure 3

Related CSS Variables

Further customize Articles by redefining any of their related CSS variables as shown below.

.article--column-{x} {
    --article-sidebar-width: 260px;
}