The article component offers responsive two and three column layouts. It includes fixed-width sidebars.
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.
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.
Here x equals the amount of columns (either 2 or 3).
It holds the article's
It holds the article's sidebar or navigation content.
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).
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.
Example • Article
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.
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.
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.