UNIT 3 • STAGE 4 OF 7

Article Cards

Add three article cards in a row using Flexbox and the <article> element

🏠 Home Unit 3 ← Stage 3 Stage 5 →
UNIT
STEP 1

Review: Hero Section is Live

Your newspaper now has a masthead, a full-width hero image, and an overlay caption. Below the hero goes the article section - three smaller stories arranged side by side.

Story One
Article text goes here...
Story Two
Article text goes here...
Story Three
Article text goes here...
STEP 2

Meet the <article> Element

HTML has a semantic element called <article> - it's used for self-contained pieces of content that could stand alone, like a news article, blog post, or comment.

ElementMeaning
<section>A thematic grouping of content
<article>A standalone, self-contained piece of content
<main>The primary content of the page

🌐 Why Semantics Matter

Using the right HTML element helps screen readers, search engines, and other developers understand your page. A screen reader announces <article> differently than a plain <div> - making your page more accessible to all users, including those in your community who rely on assistive technology.

STEP 3

Add the Article Container HTML

After the closing </section> of your main article (but still inside <main>), add the article container with three article elements.

👉 Add this after your .main-article closing </section>: <section class="article-container">

  <article class="article">
    <h2>Community Event Headline</h2>
    <p>Write your first article story here. What happened in your community recently? A celebration, a gathering, a sports win?</p>
  </article>

  <article class="article">
    <h2>Tribal Nation News</h2>
    <p>Write your second story here. What is your Tribal nation working on? New programs, cultural events, or language classes?</p>
  </article>

  <article class="article">
    <h2>Indian Country Update</h2>
    <p>Write your third story here. What is happening across Indian Country? Land returns, sovereignty wins, cultural preservation?</p>
  </article>

</section>
STEP 4

Style the Article Container

Add Flexbox to the .article-container to lay the three articles side by side, centered, with a max width that aligns with the hero image.

👉 Add these rules to your <style> tag: .article-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
  • display: flex - switches the container to Flexbox, arranging the three article elements side by side in a row instead of stacking them vertically.
  • justify-content: center - centers the row of articles horizontally inside the container, so they sit in the middle of the page rather than against the left edge.
  • gap: 20px - adds 20px of empty space between each article. Unlike margin, the gap only appears between items - not on the outer edges.
  • padding: 20px - adds breathing room between the container's edges and the articles inside it, so the cards don't press against the sides of the content area.
  • max-width: 1000px and margin: 0 auto - locks the container to the same 1000px maximum width as the hero image above it, then centers it with auto margins. This keeps the articles visually aligned with the hero section.
STEP 5

Style the Individual Articles

Each .article gets a white background, rounded corners, padding, and a box shadow - the same card treatment you used in Unit 2.

👉 Add this rule: .article {
  background: white;
  padding: 20px;
  width: 30%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
}
  • background: white - gives each article card a white fill that pops against the warm newsprint page background, making them visually distinct from the page.
  • padding: 20px - adds space inside the card between its edges and the text, so headlines and paragraphs aren't cramped.
  • width: 30% - sets each card to 30% of the container's width. Three cards at 30% each uses 90% of the width; the remaining 10% is split between the two 20px gaps. See the tip below for an alternative approach.
  • border-radius: 8px - softly rounds the corners. Newspaper article cards with rounded corners look modern and intentional - different from the squared-off feel of print.
  • box-shadow: 0 4px 10px rgba(0,0,0,0.1) - a subtle shadow that lifts each card off the page background, adding visual depth and making the cards look clickable.
  • text-align: left - overrides the text-align: center on body. Article text is always more readable when it's left-aligned - centering long paragraphs creates uneven, jagged line starts that are hard to follow.

📐 width: 30% vs flex: 1

Three articles at 30% width each (plus 20px gaps between them) fills the container nicely without overflowing. You could also try flex: 1 instead - which tells each article to take an equal share of the available space, and automatically adjusts if you add or remove articles later.

STEP 6

Write Your Three Stories

Replace the placeholder headlines and text with real stories:

  • Article 1 - a community event (powwow, tournament, graduation, ceremony)
  • Article 2 - something happening with your Tribal nation (new program, news, achievement)
  • Article 3 - a story from Indian Country broadly (land return, sovereignty, language revival)

🌟 Stage 4 Complete!

Three articles are laid out side by side using Flexbox. In Stage 5, you'll add images to each article and style the text inside the cards.

Code Editor
Live Preview
Relentless Feather © 2026 Relentless Feather. All rights reserved.