UNIT 14 • STAGE 5 OF 7

The Nations

Regional reservation overview and a personal research card for your nation

UNIT
STEP 1

What You Are Building

Stage 5 adds The Nations section. It has two parts that work together.

Part 1: Regional overview. A three-column grid of reservation cards covering six nations in MN, ND, and SD whose reservations were established or significantly shaped during the 1850-1887 era. These cards are pre-built. Read them. The nations covered are Standing Rock, Rosebud, Pine Ridge, Spirit Lake, Fort Berthold, and Red Lake.

Part 2: Your nation. A personal research card at the bottom of the section. You choose the Tribal nation or reservation that represents you or your community. If you are Native, document your own nation. If you are not Native or your nation is not in this region, choose one that matters to you for a reason you can explain. Research it using the nation's own official website as your primary source. Write about it in your own words.

These are present-day nations

The reservations you are documenting in this section are not historical artifacts. Standing Rock, Rosebud, Pine Ridge, Spirit Lake, Fort Berthold, and Red Lake are active sovereign nations where Tribal members live, work, raise families, and govern themselves today. The reservation system established the boundaries of these homelands. Those boundaries are contested and have been reduced over time. But the nations are here. That is not in the past tense.

STEP 2

Research Your Nation

Before you touch the code, spend 15 minutes on the official website of the nation you are choosing to document. You are gathering the following:

  • The nation's full official name
  • Their location (state, reservation name if different from nation name)
  • A brief description of what makes this nation significant to this era specifically
  • One current fact: enrollment numbers, land area, or a present-day program or government initiative
  • The URL of the official website
▶ Standing Rock Sioux Tribe (standingrock.org) ▶ Rosebud Sioux Tribe (rosebudsiouxTribe-nsn.gov) ▶ Oglala Lakota Nation (Pine Ridge) (oglalalakotanation.org) ▶ Spirit Lake Nation (spiritlakenation.com) ▶ MHA Nation (Fort Berthold) (mhanation.com) ▶ Red Lake Nation (redlakenation.org)

Using official Tribal nation websites as primary sources

When you are writing about a Tribal nation, the gold standard source is the nation's own official website. Not Wikipedia. Not a tourism site. The nation's own .gov or official domain. This is the sourcing practice you are building: when a community has written about themselves, go to that source first. It is both more accurate and more respectful than relying on external descriptions.

STEP 3

New CSS: Nations Grid and Research Card

Nations grid (pre-built overview cards)

// Three-column grid for the regional overview cards. .nations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.nation-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
  padding: 28px 24px;
}
.nation-location { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 8px; }
.nation-name { font-size: 1.0625rem; font-weight: 700; margin-bottom: 10px; }
.nation-desc { font-size: 0.875rem; color: var(--text-dim); line-height: 1.65; }
  • grid-template-columns: repeat(3, 1fr): three equal columns. Six nations fit into two rows of three. This is enough cards that a list would feel heavy, but few enough that a grid reads clearly without wrapping awkwardly.
  • margin-bottom: 56px: extra space below the overview grid to visually separate it from the personal research card beneath it. The two parts of this section serve different purposes; the gap signals that distinction.
  • .nation-location: the small uppercase state/location eyebrow. Placed above the nation name, it orients the reader geographically before they read the description.

Personal research card

// The "your nation" card has a distinct left border to visually separate it from the overview grid. .my-nation-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 36px 40px;
}
.my-nation-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.my-nation-name { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 900; margin-bottom: 16px; }
.my-nation-text { font-size: 0.9375rem; color: var(--text-dim); line-height: 1.78; max-width: 700px; }
  • border-left: 4px solid var(--gold): the same left-accent you used for the pull quotes in Stage 4. Used again here, it connects the "personal writing" sections of the site visually: both the quotes and your nation card are things the student has authored and researched, not pre-filled template content.
  • border-radius: 0 12px 12px 0: rounds only the right side, keeping the left edge flush with the accent stripe. Same reasoning as the pull quote.
  • font-family: 'Playfair Display' on .my-nation-name: elevates the nation name to headline status, the same weight as the section titles. Your nation's name belongs at that level of typographic hierarchy.
STEP 4

Fill In Your Nation Card

Find the <!-- REPLACE: ... --> comments in the My Nation section of the code. Fill in:

  • Nation name: the official full name of the nation
  • Location: state and reservation name
  • Your research: 3 to 4 sentences about this nation's history during the Reservation System era and what makes this nation significant to you or your region
  • A present-day fact: enrollment, land area, a current program, or something current from the nation's own website
  • The link: update the href in the "Visit Nation Website" link to the official URL

If you are not sure which nation to choose

Choose the nation whose reservation is closest to where you live or go to school. Look up the reservation boundaries near you. Read the nation's own website. That geographical proximity is a starting point for understanding which nations' history is most directly part of your own context. You do not need a personal connection to write accurately and respectfully about a Tribal nation.

STEP 5

Why These Choices

The Nations section is the most personal section of the entire research website. Every other section documents what happened. This section asks you to connect it to something specific and present: a nation that exists today, that has a website, that you can go learn more about right now.

The left-border accent on the "My Nation" card is a deliberate visual echo of the pull quotes in Stage 4. Both patterns mark the places in the site where the student is not reporting but researching and deciding. The pull quotes are where you chose a voice to include. The nation card is where you chose a community to document. Both choices matter and both should look like they matter.

Stage 5 Complete!

The Nations section is built. Stage 6 adds My Research: the source documentation section where you collect and display the resources you used across the whole unit. Same horizontal flex source card pattern you used in Unit 12.

Code Editor
Live Preview