Stage 2: Key Cases | Unit 12

STEP 1

The Marshall Trilogy

Between 1823 and 1832, Chief Justice John Marshall wrote three Supreme Court decisions that still govern the relationship between Tribal nations and the United States today. They are called the Marshall Trilogy, and no other three cases in American history have had a greater impact on Native peoples.

Johnson v. McIntosh (1823)

The first case. Two men both claimed title to the same land in Illinois: one bought it from the federal government, the other from the Piankeshaw Nation directly. Marshall ruled that private citizens could not buy land directly from Tribal nations. Only the federal government could extinguish Indian title. To justify this, Marshall invoked the Doctrine of Discovery: European powers had claimed superior title to North American land simply by arriving here. The United States inherited that claim. Indigenous peoples were reduced from owners to occupants.

Cherokee Nation v. Georgia (1831)

Georgia was seizing Cherokee land and arresting Cherokee citizens under state law. The Cherokee Nation filed suit directly in the Supreme Court, asking for protection as a foreign nation. Marshall said the Court could not hear the case because Tribal nations were not foreign nations. They were "domestic dependent nations," with a relationship to the United States that "resembles that of a ward to his guardian." This phrase would be used for the next 150 years to justify federal control over Tribal affairs.

Worcester v. Georgia (1832)

A missionary named Samuel Worcester was arrested by Georgia for living on Cherokee land without a state permit. Marshall ruled that Georgia had no authority inside the Cherokee Nation. Tribal nations were "distinct political communities" with exclusive authority within their own territory. State law could not reach them. It was the most powerful affirmation of Tribal sovereignty the Court ever issued. President Andrew Jackson reportedly responded: "John Marshall has made his decision; now let him enforce it." The Trail of Tears began the following year.

STEP 2

New CSS Concept: 3D Flip Cards

Your editor now contains a Key Cases section with CSS flip cards. This is the new technique for this unit. Look at the preview: hover over a card to see it tilt, then click it to flip it and reveal the full case description.

Here is how the flip effect works:

Front face Case name, year, hook text.
Visible by default.

→

Back face (rotated 180°) Full description, ruling quote, link.
Hidden by default.

The three properties that make it work:

// 1. perspective, makes the 3D space visible to the browser .flip-card {
perspective: 1200px;
}

perspective: 1200px: tells the browser to treat elements inside this card as if they exist in 3D space, seen from 1200px away. Without this, rotating an element just squishes it flat. With it, the rotation looks truly three-dimensional.

// 2. transform-style: preserve-3d, passes 3D space down to children .flip-card-inner {
transform-style: preserve-3d;
transition: transform 0.65s;
}

transform-style: preserve-3d: without this, the front and back faces would both flatten into the same 2D plane. This property tells the browser: the children of this element also live in 3D space, not just the parent.

// 3. backface-visibility: hidden, hides the back of each face .flip-card-front,
.flip-card-back {
backface-visibility: hidden;
}

backface-visibility: hidden: when a face is rotated more than 90 degrees away from the viewer, hide it. This prevents the front text from showing through the back of the card as a mirror image during the flip.

// The back face starts pre-rotated 180deg, hidden behind the front .flip-card-back {
  transform: rotateY(180deg);
}

/* Hover: tilt to signal the card is interactive */
.flip-card:hover .flip-card-inner {
  transform: translateY(-6px) rotateY(8deg);
}

/* Click adds .flipped class, JS handles this */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

STEP 3

Read the Cards in Your Preview

Click the Live Preview panel. Hover over each flip card, then click to flip it. Read through all three Marshall Trilogy cases. These are real Supreme Court decisions that still govern Tribal sovereignty today.

When you have read all three, come back here for Step 4.

Why Cases, Not Just Events?

Legal cases are where policy meets consequence. Congress could pass a law; the Supreme Court decided what it meant and who it applied to. For Tribal nations, courts have been both the source of some of the greatest protections and some of the greatest injustices. Understanding these cases is understanding the legal architecture of Indian Country today.

STEP 4

Add Your Fourth Card

Your editor has three flip cards. Scroll to the bottom of the cases-grid div and add a fourth card: the Indian Removal Act of 1830. This is a law, not a court case, but it belongs in this section because it is one of the most consequential acts of federal policy from the Treaty-Making Era.

Here is the content for your fourth card. Follow the exact same HTML pattern as the three cards above it:

Card 4 Content: Indian Removal Act (1830)

Year badge: 1830

Name: Indian Removal Act

Front hook: Congress authorized President Jackson to negotiate removal treaties, exchanging the ancestral lands of eastern Tribal nations for territory west of the Mississippi. Tribes were told it was voluntary. It was not.

Back detail: Signed into law by Andrew Jackson on May 28, 1830, the Indian Removal Act gave the president authority to grant unsettled lands west of the Mississippi to Tribal nations in exchange for their eastern homelands. Within a decade, the Five Civilized Tribes had been forcibly removed. The Cherokee Nation's removal in 1838 killed an estimated 4,000 of 16,000 people on the march.

Back ruling (use this as the quote): "The Indians must conform to the white man's way, peaceably if they will, forcibly if they must.": Commissioner of Indian Affairs Thomas J. Morgan, 1889

Link text: See in timeline ↓

Follow the Pattern

Look at how each existing flip card is structured in the editor. The pattern is always: .flip-card wrapper → .flip-card-inner → .flip-card-front and .flip-card-back. Your fourth card needs the same structure with the content above.

STEP 5

Why These Design Choices

Flip cards are a UX pattern called progressive disclosure: show a summary first, reveal depth on interaction. This respects the reader's attention. Not everyone wants to read a full case description immediately. The front of the card gives them enough to decide if they want to know more.

The hover tilt is intentional: it signals that the card is interactive before the user clicks. Good UX gives users clues about what will happen when they interact with an element. A tilt says "this moves" the same way a button shadow says "this is pressable."

The back of each card uses a slightly different background color than the front. This subtle shift tells users they have crossed into a different layer of information. It is a small but meaningful signal.

Stage 2 Complete!

Your Key Cases section is in place with four cards covering the Marshall Trilogy and the Indian Removal Act. In Stage 3 you will add the Timeline section: a year-by-year record of the major laws, cases, and events of the Treaty-Making Era, and two events from your own research.

Key Cases: The Marshall Trilogy