UNIT 18 • STAGE 3 OF 7
The Laws
New pattern: filterable legislation cards by decade. New CSS: grid-column 1 / -1.
The New Pattern: Filterable Cards
Stage 3 introduces the most used interactive pattern in web development: a grid of items that a user can filter by category. You click a button, and only the matching items appear. Everything else hides. The same pattern powers product catalogs, search results, portfolio galleries, and content dashboards across professional web development.
In this unit, the items are laws. The categories are decades: 1970s, 1980s, 1990s. Each law card carries a data-decade attribute. Each filter button carries a data-filter attribute. The JavaScript reads the button's filter value and compares it to each card's decade. If they match, the card shows. If they do not, the card hides.
This section also introduces a second new CSS concept: grid-column: 1 / -1, which makes any element span all columns in a grid. You will use it on the California v. Cabazon Band callout card.
The data flow
User clicks "1980s" button → JS reads this.dataset.filter = "1980s" → JS loops through every .law-card and .cabazon-callout → checks card.dataset.decade → if it equals "1980s" or filter is "all", set card.style.display = "block" → otherwise set card.style.display = "none".
New CSS: Filter Buttons
The filter buttons sit in a .filter-row flex container above the grid. Each button starts with background: transparent and a subtle border. When a button becomes active (the selected filter), it fills with the accent color. The first button starts with the active class already applied in HTML, showing "All Laws" as the default.
.filter-btn {
font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 8px 20px; border-radius: 100px;
border: 1px solid var(--gold-border);
background: transparent; /* no fill by default */
color: var(--text-dim); cursor: pointer; transition: all 0.2s;
}
.filter-btn:hover { border-color: var(--gold); color: var(--text-light); }
.filter-btn.active {
background: var(--gold); /* filled with accent color */
color: #0D1B2A; /* dark text on light background */
border-color: var(--gold);
}
New CSS: grid-column: 1 / -1
The California v. Cabazon Band callout is more important than a single law card. It needs to span the full width of the grid to signal that. grid-column: 1 / -1 does this in one line. The -1 is a negative grid line index: it means "the last grid line," regardless of how many columns the grid has.
.cabazon-callout {
grid-column: 1 / -1; /* starts at line 1, ends at last line */
/* in a 3-column grid: 1 / -1 = 1 / 4 = spans all 3 columns */
background: var(--bg-section); border: 1px solid var(--gold-border);
border-left: 4px solid var(--gold);
border-radius: 0 14px 14px 0;
padding: 36px 36px 36px 32px;
}
You will use grid-column: 1 / -1 again in Stages 4 and 5 on different grids. Once you know it, you will use it constantly.
California v. Cabazon Band of Mission Indians (1987)
The Cabazon Band and Morongo Band of Mission Indians in California operated high-stakes bingo and card games on reservation lands. California tried to regulate or shut the games down. The Supreme Court ruled 6-3 that if a state permits a form of gaming, even with regulation, it cannot use state law to prohibit Tribes from offering that same gaming on Tribal lands. The key distinction: if a state prohibits an activity entirely, it may have authority to apply that prohibition on Tribal land. If a state only regulates the activity, it cannot impose that regulatory framework on Tribes. California allowed bingo. It could not prohibit Tribal bingo. Congress responded the next year with IGRA, creating the legal structure for Tribal gaming that exists today.
New CSS: Law Cards
Each law card has a decade tag, the law's full name, its acronym or public law number, and a short description of what it did. The data-decade attribute on each card is what the JavaScript reads to decide whether to show or hide it.
.law-decade-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; }
.decade-1970s { background: rgba(119,141,169,0.12); color: var(--gold); }
.decade-1980s { background: rgba(65,90,119,0.15); color: #7BA0B8; }
.decade-1990s { background: rgba(46,63,92,0.2); color: #8AABB8; }
.law-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; color: var(--text-light); }
.law-citation { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px; }
.law-body { font-size: 0.875rem; line-height: 1.65; color: var(--text-dim); }
The JavaScript Filter
The filter runs three operations on each button click: (1) remove .active from all buttons, (2) add .active to the clicked button, (3) loop through all cards and show or hide based on the selected filter.
var filterItems = document.querySelectorAll('.law-card, .cabazon-callout');
filterBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
/* 1. Remove active from all buttons */
filterBtns.forEach(function(b) { b.classList.remove('active'); });
/* 2. Add active to this button */
this.classList.add('active');
/* 3. Read which filter was selected */
var filter = this.dataset.filter;
/* 4. Show/hide each card based on decade */
filterItems.forEach(function(item) {
item.style.display = (filter === 'all' || item.dataset.decade === filter)
? 'block' : 'none';
});
});
});
Stage 3 Complete!
You have built the filterable legislation grid. Click each filter button in the preview and verify that the right cards appear and disappear. Test the "All Laws" button to confirm everything comes back. Stage 4 adds the nation profiles: Mille Lacs Band, Red Lake Nation, and Pine Ridge.
© 2026 Relentless Feather. All rights reserved.