Photo by Jenna Brummond
Article
Introduction
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>
| Line # | Details |
|---|---|
| 1 | The parent Here x equals the amount of columns (either 2 or 3). |
| 3-5 | The It holds the article's |
| 7-9 | The It holds the article's sidebar or navigation content. |
| 11-13 | The 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>
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.
| Country | Production (tonnes) |
|---|---|
| Italy | 387,803 |
| Spain | 223,150 |
| Egypt | 185,695 |
| Peru | 145,068 |
| Argentina | 108,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__media">
<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>