UNIT 22 • STAGE 4 OF 7
Dance Categories
Category cards with aspect-ratio and badge pills
Dance Categories at a Powwow
Competition at a powwow is organized by dance category, age group, and gender. The six major categories are: Men's Traditional (oldest style, rooted in warrior and hunting movement), Grass Dance (fluid, flowing movements that flatten the dance area), Men's Fancy Dance (fast, acrobatic, with bright double-bustle regalia), Women's Traditional (dignified, reserved steps honoring the earth), Jingle Dress (healing dance from Ojibwe tradition, with rows of tin cones that jingle), and Women's Fancy Shawl (energetic butterfly movements with large shawl as wings).
In this stage you will build a grid of category cards. Each card has a colored background, a title, a type badge, and a short description. The key CSS property is aspect-ratio: 3 / 2, which forces each card to be exactly 1.5 times wider than it is tall — without needing fixed pixel heights.
Add the Dance Category CSS
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.category-card {
aspect-ratio: 3 / 2;
border-radius: 16px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.category-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.9);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
margin-bottom: 10px;
}
.category-name {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
color: white;
line-height: 1.2;
margin-bottom: 8px;
}
.category-desc {
font-size: 0.875rem;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
aspect-ratio: 3 / 2 forces each card to maintain a 3-to-2 width-to-height ratio. As the grid column width changes (wider or narrower), the card height adjusts automatically to keep the ratio. This replaces the old padding-top hack (padding-top: 66.67%) and is much easier to read and understand.
justify-content: flex-end inside the flex column pushes all the card content to the bottom — so the title and description sit at the bottom of the colored area, like a caption on a photo.
Add the Dance Categories HTML
Add this after the schedule section. Each card uses an inline background color to represent the category. The badge inside each card shows whether it is "Men's" or "Women's" competition.
<div class="container">
<p class="section-label">Competition</p>
<h2 class="section-heading">Dance Categories</h2>
<div class="categories-grid">
<div class="category-card" style="background:#1a3a2a">
<span class="category-badge">Men's</span>
<p class="category-name">Men's Traditional</p>
<p class="category-desc">The oldest dance style. Movements are grounded and deliberate, rooted in warrior and hunting traditions.</p>
</div>
<div class="category-card" style="background:#2a3a0a">
<span class="category-badge">Men's</span>
<p class="category-name">Grass Dance</p>
<p class="category-desc">Flowing, fluid movements that mimic the movement of prairie grass. One of the oldest organized dance styles.</p>
</div>
<div class="category-card" style="background:#3a1a00">
<span class="category-badge">Men's</span>
<p class="category-name">Men's Fancy</p>
<p class="category-desc">Fast, energetic, and acrobatic. Dancers wear double-bustle regalia and perform quick spins and drops.</p>
</div>
<div class="category-card" style="background:#1a0a2a">
<span class="category-badge">Women's</span>
<p class="category-name">Women's Traditional</p>
<p class="category-desc">Dignified, reserved movement that honors the earth and the feminine role in Tribal community life.</p>
</div>
<div class="category-card" style="background:#0a1a2a">
<span class="category-badge">Women's</span>
<p class="category-name">Jingle Dress</p>
<p class="category-desc">A healing dance from the Ojibwe tradition. The dress is covered in tin cones that jingle with each step.</p>
</div>
<div class="category-card" style="background:#2a001a">
<span class="category-badge">Women's</span>
<p class="category-name">Women's Fancy Shawl</p>
<p class="category-desc">Energetic butterfly-inspired movements. The shawl opens like wings during spins and leaps.</p>
</div>
</div>
</div>
</section>
Stage 4 Complete
You now have six dance category cards in a responsive auto-fill grid. The aspect-ratio: 3 / 2 keeps them proportional at any size. The content stacks at the bottom with justify-content: flex-end, and the frosted badge sits above each title.
Next: Stage 5 adds Vendors and Info — a two-column layout with practical event information for attendees.
© 2026 Relentless Feather. All rights reserved.