Prototype CSS
Example Block Gallery
This page shows reusable Drupal block patterns built only from the shared `isl-` classes now available on the live site.
Included Patterns
- Topic hero
- Intro panel and card section
- Detail layout with rail
- Media cards
- Staff cards
- Policy cards and tables
Topic Hero
Informatics
Use this pattern when a page needs a high-contrast landing hero with strong program or topic framing.
- Hero Image
- Program Overview
- Primary CTA
Intro Panel
Intro With Supporting Copy
Use this for a lead-in section that needs a little more visual weight than plain rich text without becoming a full hero.
Soft Card
Content Summary
Good for section summaries, supporting context, and grouped calls to action.
Emphasis Card
Highlighted Panel
Use this variant when a block should stand out slightly more through background treatment and shadow.
Detail Layout
Primary Content Area
This two-column layout works well for event details, program requirements, or any page where the main narrative is paired with structured support content.
- Strong headline and supporting paragraphs
- Lists, actions, and short explanatory sections
- Good fit for events, admissions, and academic details
Media Cards
Card Grid Example
These cards are useful for feature collections, highlighted resources, news groupings, or alumni/profile previews.
Feature Card Title
Use a concise title and one short paragraph for the strongest results.
Secondary Feature
This format also works well for curated links to archives, tools, or student stories.
Tertiary Feature
Keep copy compact so the cards remain visually balanced across a row.
Example Person
Use this pattern for staff, faculty, alumni spotlights, and similar people-based content.
Example Person
This layout works best when titles stay short and supporting text is no more than a few sentences.
Policy Card
Deadline:
Compact format for deadlines, procedures, and requirement summaries.
Policy Card
Delivery:
Keep one key fact per line where possible.
Dark Emphasis Panel
Use this more sparingly for high-priority messages, quotes, or campaign-style callouts.
Tables And Lists
Structured Content Example
| Item | Audience | Notes |
|---|---|---|
| Topic Hero | Landing pages | Best with a strong image and one primary CTA. |
| Detail Layout | Program and event pages | Useful when main content needs a supporting rail. |
| Media Cards | Feature collections | Works well for stories, projects, and archive previews. |
- Shared Tokens
- Reusable Objects
- Accessible Defaults
- Live Site CSS