UNIT 15 • STAGE 4 OF 7
The Schools
Document the federal boarding school system as policy, new flex layout for fact items
Building The Schools Section
Stage 4 documents the federal boarding school system as policy. The section is built from facts in the public record. No quotes. No interpretation. The documented mechanisms of the system, what was prohibited, what was enforced, what the scale was, presented in a clean, readable layout.
The section has two parts: a featured card for Carlisle Indian Industrial School (the first and most documented federal off-reservation boarding school), and a fact list documenting six policy mechanisms drawn from federal records and the 2022 DOI Investigative Report.
The Federal Record
The 2022 Federal Indian Boarding School Initiative Investigative Report, published by the U.S. Department of the Interior, identified 408 federal Indian boarding schools that operated in 37 states between 1819 and 1969. It documented 53 burial sites on or near former school properties. It found that the federal government "directly targeted American Indian, Alaska Native, and Native Hawaiian children" through the school system as a matter of deliberate federal policy. This is the federal government's own finding about its own actions. The report is publicly available at the Bureau of Indian Affairs website and is cited as the source for the scale and policy facts in Stage 4.
New CSS: The Fact Item Pattern
The new CSS in Stage 4 is the fact item: a horizontal flex layout with a large number or marker on the left and content on the right. You have used vertical flex containers before. This is the first time you are using flex-direction: row (the default) to build a horizontal layout inside a list item.
The two-column schools layout
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
align-items: start: Both columns start at the same vertical position, but their heights are independent. The hero grid usedalign-items: centerto vertically center shorter text next to a tall image. Here, both columns have similar amounts of text, and top-alignment looks more organized than centering.
The fact list container
display: flex;
flex-direction: column;
gap: 16px;
}
Each fact item, the horizontal flex pattern
display: flex;
gap: 20px;
align-items: flex-start;
padding: 20px 24px;
background: var(--bg-card);
border: 1px solid var(--gold-border);
border-radius: 10px;
}
.fact-marker {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.75rem;
font-weight: 900;
color: var(--gold);
line-height: 1;
flex-shrink: 0;
width: 36px;
text-align: center;
opacity: 0.5;
}
.fact-body { flex: 1; min-width: 0; }
.fact-body strong { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--text-light); margin-bottom: 4px; }
.fact-body p { font-size: 0.9375rem; color: var(--text-dim); line-height: 1.65; margin: 0; }
display: flexon.fact-item: This makes the marker and the content sit side by side horizontally. Noflex-direction: rowneeded,rowis the default.align-items: flex-start: Aligns the marker and content at the top of the flex container. Without this, the marker number would vertically center alongside the text, which looks off when the text is longer than one line.flex-shrink: 0on.fact-marker: Prevents the marker column from squishing. Same principle as the source card type column you will build in Stage 6.flex: 1; min-width: 0on.fact-body: Takes all remaining space after the marker.min-width: 0prevents text overflow in flex containers, without it, long words can escape their container in certain browsers.opacity: 0.5on.fact-marker: The number is decorative here, not the content. Dimming it to 50% keeps it visible as a structural element without competing with the text it anchors.
Your Task
The Schools section is pre-built with documented facts from the 2022 DOI Investigative Report and the Carlisle Indian School Digital Resource Center. Read the section carefully. Then:
- Find the
<!-- REPLACE: ... -->comment in the intro paragraph. Write 2–3 sentences in your own words about the boarding school system. Use a specific fact as your first sentence. - If there was a federal boarding school in your state or region, add a 7th fact item documenting it. The 2022 DOI report includes a full list of school names, locations, and dates of operation. Find yours.
Finding regional schools
The DOI 2022 report includes a full appendix of all 408 schools with locations and dates. Search it for your state. Minnesota schools include Pipestone Indian Training School and Morris Industrial School for Indians (now UMN Morris campus). North Dakota schools include Fort Totten Indian Boarding School at Spirit Lake and Standing Rock Boarding School. South Dakota schools include Pierre Indian School and several reservation boarding schools. The DOI report PDF is linked in the Stage 1 resources.
Why the Layout Works
The two-column layout separates the Carlisle history (a specific institution) from the policy mechanisms (what the system did across all 408 schools). A reader can understand Carlisle as the central case and then understand the system it represented. The fact list's numbered markers give the reader a sense of how many distinct mechanisms were involved without requiring them to count paragraphs.
The align-items: flex-start choice in the fact item is something worth noticing in the preview. Try changing it to center and see what happens to the longer fact items. The marker stays fixed while the text wraps, centering them makes the number float in the middle of a multi-line fact, which looks wrong. flex-start pins both to the top and keeps the reading order clear.
Stage 4 Complete!
The Schools section is built. Stage 5 adds The Nations: a general look at how allotment affected different types of nations, with a specific callout for Red Lake Nation's resistance, followed by a personal research card for the nation you have been documenting throughout this unit.
© 2026 Relentless Feather. All rights reserved.