Definitions
Card
A self-contained content surface for modules, grouped content, forms, previews, and standalone sections.
Cards can contain interactive elements, but they are not automatically whole-click targets.
- Visual: surface, padding, border or shadow, rounded corners.
- Role: content-first.
- Use when: the content can stand on its own as a unit.
- Avoid: making every card a giant link unless it is truly a tile.
Panel
A framed region for structured content, grouped controls, settings blocks, and titled information sections.
Panels auto-style the first direct heading as a header bar.
- Visual: framed region with a stronger container structure.
- Role: grouping and organization.
- Use when: you need a titled region with mixed content.
- Avoid: using panels for small single-item previews when a card is enough.
Tile
An interactive navigation or action block where the entire surface is the link or action.
Use tiles for indexes, dashboards, and grouped navigation choices.
Tiles include hover and keyboard focus states.
- Visual: consistent block sizing with strong interactive affordance.
- Role: action-first.
- Use when: the whole block should be clickable.
- Avoid: long paragraphs or dense editorial content inside tiles.
Banner
A horizontal message strip for announcements, page titles, section context, or lightweight calls-to-action.
Banners are page or section-level containers, not content cards.
- Visual: wide strip with medium emphasis.
- Role: message-first.
- Use when: you need noticeable context without taking over the page.
- Avoid: using banners as grid items in card layouts.
Hero
A high-impact entry section with primary messaging and a clear action.
Use heroes for campaigns, landing pages, and primary page entry content.
- Visual: larger spacing and stronger page hierarchy.
- Role: identity plus primary action.
- Use when: a page needs a clear entry point.
- Avoid: stacking multiple heroes in one region.
Fast rules
- Card: content object.
- Tile: action object.
- Panel: grouping region.
- Banner: message strip.
- Hero: entry section.
If every container becomes a card, the page loses hierarchy. Use the right pattern so the layout keeps meaning and rhythm.
Core card styles
These are the base primitives from css/components/wg-content-containers.css. Each can be used on its own.
*Dashed border is for spacing reference only.
card — base spacing, background inherits.
card-ghost — transparent background.
card-soft — soft fill + subtle border.
card-lifted — raised surface + shadow.
card-outline — border only.
Card templates
Use templates when you want consistent internal structure across a row or section, such as image + title + content + CTA.
The template classes shown here are page/template patterns layered on top of the core card primitives.
Card Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates.
Explore Style override class="bs-lg border-uvu-green"
Go to School of Education
Go to School of Education
Go to School of Education
Go to School of Education
Go to School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates.
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates accusamus quis.
Go to School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates accusamus quis.
Go to School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti voluptate tempore porro aspernatur eveniet nulla unde, dolor voluptates accusamus quis.
Go to School of EducationPanels
Panels are framed regions for structured content. In the CSS, the first direct heading becomes a header bar automatically.
Panel
Panels work well for grouped controls, settings, and information blocks.
- Use semantic headings
- Use semantic lists
- Use buttons and links inside as needed
Card stack
Use card-stack when each direct child should become a row with dividers. This works well for events, stats, and grouped details.
Card Title
Event
Nov 23
4:00pm – 8:00pm
Card Title
Event
Nov 23
4:00pm – 8:00pm
Map
Card Title
Event
Nov 23
4:00pm – 8:00pm
Map
Card Title
Event
Nov 23
4:00pm – 8:00pm
Map
Card lists
Card list containers add structure such as rail or zebra striping without replacing your list marker classes.
- Rail list: grouped rules, quick references, and short sections.
- Use with list styles like
list-dashorlist-check. - Good for scanning and visual rhythm.
- Zebra list: steps, instructions, and denser text.
- Alternating row backgrounds improve readability.
- Markers still come from the list classes.
Content cards
Use these when the content role is the meaning: featured content, emphasis, or informational guidance.
Callout card
Use for supporting emphasis that should stand out without becoming an alert.
Learn moreInfo card
Use for calm documentation, guidance, and denser layouts.
Quotes
Quote cards are editorial content patterns used to highlight a statement or voice.
- Use for pull quotes, testimonials, and highlight statements.
- Do not use for layout, navigation, or generic messaging.
– Ludwig Mies van der Rohe
Less is more.
– Ludwig Mies van der Rohe
When it comes to your goals and dreams, it’s so important not to let anyone else’s doubt about you turn into doubt in your own head. Someone else’s doubt about you is no indication of your potential success.
Imagine yourself inspiring the next generation with skills gained in our state-of-the-art Clarke Building. It’s not just a place; it’s a vibrant hub where faculty mentorship, field experiences, and innovative teaching resources come together for the ultimate educator journey.
Tiles
Use tiles when the entire block is a link or action. Tiles include hover and keyboard focus styles in the core content container CSS.
Banners & heroes
Banners and heroes are page-level containers. Use them to introduce pages or sections, not as modular cards inside content grids.
- Banners: page titles, section headers, and short supporting text.
- Heroes: campaign-like entry areas with primary CTA or key messaging.
- Keep content concise and readable at all viewport sizes.
School of Fiction
Faculty, Staff and Leadership
School of Fiction
Faculty, Staff and Leadership
Example hero
Heroes are high-impact entry blocks. Keep CTAs limited and readable.
Do not mix cards with uneven content
Use consistent templates in a row and consider content length to avoid distracting imbalance.
- Mixed card heights can create layout noise and distracting whitespace.
- Use consistent templates and keep content lengths comparable.
- Always verify the layout at all viewport sizes.
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Go to School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Go to School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum expedita similique non voluptatum earum quo magni dicta consequatur deleniti.
Go to School of Education
Card Title
sub title
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Go to School of EducationIt seems that you have reduce motion enabled!