UNIT 17 • STAGE 4 OF 7

The Relocation

Build The Relocation section: city cards with inline tags, and an asymmetric feature layout for the Twin Cities and AIM

Home All Units Unit 17 ← Stage 3 Stage 5 →
UNIT
STEP 1

Stage 4: The Relocation

Stage 4 builds The Relocation section, documenting the BIA Urban Relocation Program that ran alongside termination from 1950 through the 1960s. Six city cards show the primary relocation destinations. A feature band below focuses on Minneapolis and the Twin Cities, where the urban Indian community that formed through relocation later founded the American Indian Movement in 1968.

The new CSS patterns are display: inline-block on the city tag and grid-template-columns: 3fr 2fr on the feature band. The asymmetric grid is the key concept for this stage.

The Relocation Program and the Twin Cities

The BIA began a voluntary relocation program in 1948 and expanded it significantly after the Indian Relocation Act of 1956 (Public Law 959). The program provided one-way bus or train tickets to designated cities, a small stipend for initial housing, and promises of job training. What it did not provide, in many cases, was the training itself, follow-up support, or any path back if things did not work out.

Minneapolis and St. Paul were designated relocation cities. The BIA opened a relocation office in Minneapolis in 1950. Over the following two decades, the urban Indian population in the Twin Cities grew substantially as people arrived from Ojibwe and Dakota reservations across Minnesota, Wisconsin, and the Dakotas. The community concentrated in South Minneapolis and on the near north side of St. Paul.

That community became the foundation for the American Indian Movement, founded in Minneapolis in July 1968. AIM began as a street patrol, organized in response to documented patterns of police brutality targeting urban Indian community members. Its founding is the direct product of the relocation era: the policy that moved people to cities produced the community that organized to push back against termination policy and its aftermath.

STEP 2

City Cards and the Inline-Block Tag

Each relocation city card has a tag indicating whether the city was a primary BIA relocation destination or a secondary destination. The tag uses display: inline-block, which is different from how other badges and labels in this design system are displayed.

// Three-column grid for six city cards. .relo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.relo-card { background: var(--bg-card); border: 1px solid var(--gold-border); border-radius: 12px; padding: 28px 24px; }
// The tag: display: inline-block so it wraps its content only. .city-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
}
.city-tag-primary { background: rgba(119,141,169,0.15); color: var(--gold); }
.city-tag-secondary { background: rgba(65,90,119,0.12); color: var(--text-dim); }
  • display: inline-block: The element takes only as much horizontal space as its content plus its padding. Unlike display: block, which would stretch to fill the full width of the card, an inline-block element hugs its content. The margin-bottom below it then creates space before the city name, as if it were its own line, but without the full-width stretch.
  • Compare this to .term-status in Stage 3, which used flex-shrink: 0 inside a flex row. That badge was in a flex container, so it needed a flex-specific property. .city-tag sits in normal block flow inside the card, so display: inline-block is the right tool instead.
  • border-radius: 3px: A subtle corner radius, not a pill shape. The pill shape (border-radius: 100px) is reserved for the hero buttons, which are primary interactive elements. Tags and badges use a smaller radius to look like labels, not calls to action.
// City name and description. .relo-city-name { font-family: 'Playfair Display',Georgia,serif; font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; }
.relo-city-desc { font-size: 0.875rem; line-height: 1.65; color: var(--text-dim); }
STEP 3

The Asymmetric Feature Band

The feature band below the city cards uses an asymmetric grid: 3fr 2fr. The left column (3 parts) holds the narrative. The right column (2 parts) holds a stack of sidebar fact cards. This 60/40 split gives the story room to breathe while the facts stay in a tight column.

// Asymmetric grid: left column gets 3/5 of the space, right gets 2/5. .feature-band {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: start;
  background: var(--bg-section);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  padding: 48px;
}
  • grid-template-columns: 3fr 2fr: The numbers before fr are ratios. 3 + 2 = 5 total parts. The first column gets 3/5 (60%) and the second gets 2/5 (40%). You can also write this as 60% 40%, but fr units are more flexible because they automatically account for the gap between the columns.
  • align-items: start: Both columns start from the top of the grid row. Without this, CSS grid defaults to stretch, which would make the shorter column stretch to match the taller one's height. Here we want each column to start at the same position but end at its own natural height.
  • background: var(--bg-section) directly on the grid container: The entire feature band gets a background, not just the inner cards. This creates a contained visual zone within the section, making it stand out as a featured region.
// Feature heading, body, and sidebar fact cards. .feature-heading { font-family: 'Playfair Display',Georgia,serif; font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 900; line-height: 1.2; margin-bottom: 16px; }
.feature-body p { font-size: 0.9375rem; line-height: 1.75; color: var(--text-dim); margin-bottom: 1em; }
.feature-body p:last-child { margin-bottom: 0; }
.feature-sidebar { display: flex; flex-direction: column; gap: 14px; }
.sidebar-fact { background: var(--bg-card); border: 1px solid var(--gold-border); border-radius: 10px; padding: 18px 20px; }
.sidebar-fact-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
.sidebar-fact-value { font-size: 0.9375rem; font-weight: 600; color: var(--text-light); line-height: 1.5; }
  • flex-direction: column on .feature-sidebar: Stacks the sidebar fact cards vertically. The gap: 14px spaces them evenly without needing margin on each individual card.
  • .feature-body p:last-child { margin-bottom: 0 }: Removes the bottom margin from the last paragraph in the feature body. Without this, there would be extra space at the bottom of the content column, which would look unbalanced when you compare it to the sidebar column.
STEP 4

Fill In Your Content

The six city cards are pre-written. The feature band narrative and sidebar facts are pre-written. The section intro has a REPLACE comment.

  • Section intro: 2 to 3 sentences framing the Relocation Program. What was it, and what was it supposed to do?
  • City cards: Pre-written. If your research found additional relocation offices or cities, you can add a seventh card to the grid.
  • Feature band: Pre-written. Update if your research adds specifics about your community's connection to the relocation era.

Stage 4 Complete!

The Relocation section is built. Stage 5 adds The Nations: detailed profiles of Menominee and Klamath, the two most studied terminated and restored nations, with a note on Red Lake's exclusion from PL 280. You will also build your own nation research card.

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