Article Images & Text

Review: Three Cards Are Laid Out

Your article cards are side by side in a Flexbox row. Right now they just have headlines and text. In this stage you'll add a photo to the top of each card, then style all the text inside.

Add an Image to Each Article

Inside each <article>, add an <img> tag before the <h2>. Use a different seed for each one so the images look different.

Use a different seed for each article. Try seeds like buffalo, powwow, forest, basketball, land, or any word you like.

Style the Article Images

The images need to fill the card's full width, have a fixed height, and use object-fit: cover just like the hero image.

• width: 100% - stretches the image to the full width of the card. Since cards are a fixed 30% width, the image fills that space exactly.
• height: 220px - locks images to a consistent height. Without this, each image would display at its natural dimensions and cards would be different heights - making the layout look uneven.
• object-fit: cover - scales the image to fill the frame while preserving its proportions. Edges get cropped if needed, but the image always looks full and natural rather than squashed.
• border: 2px solid #ccc - a light gray border around each image. In print newspapers, photos typically have a thin rule around them to set them apart from the surrounding white space. This is that digital equivalent.
• border-radius: 5px - slightly rounds the image corners to match the card's own rounded corners. Small visual details like this consistency make a design feel intentional.
• margin-bottom: 10px - adds a small gap between the image and the h2 headline below it, so they don't crowd each other.

Notice the selector is .article img - this targets only images that are inside an .article element. This way, the rule won't accidentally affect the hero image or any other images on the page.

Style h2 Headlines and p Text

Style the h2 article headlines and the p body text for readability.

• font-size: 20px on h2 - a clear, confident size for article headlines. Bigger than body text but smaller than the masthead h1, maintaining proper size hierarchy across the page.
• color: #222 on h2 - a very dark gray. Pure black (#000) can look harsh on screens. #222 is nearly black but reads softer and more like ink on paper.
• margin-bottom: 10px on h2 - creates a small gap between the headline and the article text below. Without it, the headline and paragraph text would sit too close together.
• font-size: 14px on p - slightly smaller than standard body text (16px), appropriate for newspaper article text which is traditionally compact to fit more stories per column.
• color: #444 on p - a softer dark gray for body text. Combined with the near-black headlines, this creates a subtle contrast: headlines command attention, body text invites you to settle in and read.
• line-height: 1.5 on p - adds comfortable spacing between lines. Newspapers tightly packed print used small line height. Online, 1.5 is the sweet spot - readable without feeling airy.

Note: this will also style the <p> inside the hero overlay. If the overlay text looks different than expected, that's okay - you can use a more specific selector like .main-text p to override it later.

Add a "Read More" Link to Each Article

Real newspaper articles link out to sources or full stories. Add a link at the end of each article paragraph, and style all links on the page.

• color: #2563EB - a standard web blue. Blue links are a universal convention on the web - users expect clickable text to be blue. Using a familiar color respects that expectation and makes it obvious that the text is clickable.
• text-decoration: none - removes the underline that browsers add to links by default. The blue color alone signals "this is a link," so the underline becomes visual noise. Removing it makes the text feel cleaner and more like modern web design.
• font-weight: bold - makes the link text thicker, so it stands out from the surrounding paragraph text without needing to be a different size.

Make It Your Own!

• Replace placeholder images with seeds that match each story's topic
• Make sure all three articles have real content - your actual stories
• Try color: #6B9BD1 for links instead of blue - matches the RF palette
• Try height: 180px on .article img for smaller images
• Add a real Tribal nation URL to the link in the second article