H1 HEADLINE
H2 SUBHEADER
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
Marshall Art Studio design system
UI Component Library
Production-ready UI components built with semantic HTML5 and modern CSS. Components with images use a standard 600 × 400 pixel aspect ratio (3:2) that scales proportionally across breakpoints. All components meet WCAG 2.1 Level AA accessibility standards and are fully responsive. Each pattern is tested for cross-browser compatibility, keyboard navigation, and screen reader support.
Lead story component
A flexible two-column layout combining image and text for featured content. The text column includes headline, description, and call-to-action link. The component supports three column ratio options (1/2, 2/3, 3/4) to accommodate different content hierarchies and collapses to a single column stack on mobile devices. Semantic heading variants allow proper document structure for SEO and accessibility.
HEADLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Variations
2/3 lead story
HEADLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
3/4 lead story
HEADLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lead story with multiple CTA links
Header tag with subhead
Using H1 and H2 tags instead of header-agnostic DIV element
H1 HEADLINE
H2 SUBHEADER
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Full lead story for blog pages
Styled to include author and timestamp
Story group component
Combines a prominent lead story with up to four secondary Tile cards in a responsive grid layout. The lead story maintains visual hierarchy while the Tile cards provide related content or navigation options. Secondary tiles automatically arrange into columns on larger screens and stack vertically on mobile. Optional blade variant adds a section header with CTA for content categorization.
HEADLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Variations
Bottom tiles merged
Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Story group blade
Blade title Optional CTA
Headline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
Tile card component
Compact, text-focused cards designed for navigation and feature lists. Each card includes a headline, description, and is fully clickable for improved user experience. The entire card functions as a single tap target with clear focus states for keyboard navigation. Optional icon variants provide visual categorization, while centered and button-style layouts offer different visual weights.
Variations
Centered
Horizontal button
Feature card component
Image-driven cards arranged in a vertical stack with headline, description, and call-to-action. The image-first approach emphasizes visual content while maintaining responsive aspect ratios across all breakpoints. Cards arrange in a flexible grid that adjusts from single column on mobile to multi-column layouts on larger screens. Background variants provide additional visual grouping options.
Variations
Links in CTA
HEADLINE
Description
HEADLINE
Description
HEADLINE
Description
With background
HEADLINE with CTA
Description
HEADLINE with CTA
Description
HEADLINE
Description
HEADLINE
Description
Video card component
Responsive video cards for embedding YouTube, Vimeo, or other iframe-based content in a grid layout. Cards support 16:9 (default), 4:3, and 3:2 aspect ratios to accommodate different source formats, scaling proportionally across breakpoints to prevent layout shift. Headline and description fields provide context below the video frame. Black bands may appear above and below the video when the iframe's native aspect ratio doesn't match the container — a known limitation, not a styling error.
HEADLINE
Description
HEADLINE
Description
HEADLINE
Description
Variations
Custom 4:3 aspect ratio
Custom 3:2 aspect ratio
Multi link card component
Horizontal layout combining an icon, headline, description, and multiple destination links within a single topic area. Designed for navigation hubs where users need access to several related resources. The list-based markup ensures proper screen reader compatibility, and each link maintains independent keyboard focus.
Image component
Responsive images with optional captions and border treatments. All images scale proportionally with a max-width of 100% to prevent overflow on smaller screens. The figcaption element provides semantic association between images and their captions. Caption links and border variations allow flexible styling options to match different content contexts.
Link list component
Semantic list markup with flexible single or multi-column layouts for navigation menus and resource collections. Supports up to four responsive columns with automatic stacking on mobile devices. Proper list semantics ensure screen reader compatibility while focus indicators maintain keyboard accessibility. Optional descriptions and group CTAs provide additional context and navigation options.
- Link list with description Optional description
- Get iusto odio dignissim qui blandit praesent luptatum zzril
- Delenit augue duis dolore te feugait nulla facilisi
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Multi-column link lists
Two-column Link list
Optional description
- First item: Duis autem vel eum iriure dolor in hendrerit
- Second item: Sin vulputate velit esse molestie
- Third item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Fourth item: Duis autem vel eum iriure dolor in hendrerit
- Fifth item: Sin vulputate velit esse molestie
- Sixth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Seventh item: Duis autem vel eum iriure dolor in hendrerit
- Eighth item: Sin vulputate velit esse molestie
- Ninth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Tenth item: Duis autem vel eum iriure dolor in hendrerit
- Eleventh item: Sin vulputate velit esse molestie
- Twelfth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
Three-column Link list
- First item: Duis autem vel eum iriure dolor in hendrerit
- Second item: Sin vulputate velit esse molestie
- Third item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Fourth item: Duis autem vel eum iriure dolor in hendrerit
- Fifth item: Sin vulputate velit esse molestie
- Sixth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Seventh item: Duis autem vel eum iriure dolor in hendrerit
- Eighth item: Sin vulputate velit esse molestie
- Ninth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Tenth item: Duis autem vel eum iriure dolor in hendrerit
- Eleventh item: Sin vulputate velit esse molestie
- Twelfth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
Four-column Link list
- First item: Duis autem vel eum iriure dolor in hendrerit
- Second item: Sin vulputate velit esse molestie
- Third item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Fourth item: Duis autem vel eum iriure dolor in hendrerit
- Fifth item: Sin vulputate velit esse molestie
- Sixth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Seventh item: Duis autem vel eum iriure dolor in hendrerit
- Eighth item: Sin vulputate velit esse molestie
- Ninth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
- Tenth item: Duis autem vel eum iriure dolor in hendrerit
- Eleventh item: Sin vulputate velit esse molestie
- Twelfth item: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
Accordion component
Vertically stacked panels that expand and collapse to reveal hidden content, built on Bootstrap's collapse plugin. Each panel header functions as an interactive toggle, with only one panel open at a time to reduce visual clutter. ARIA attributes and keyboard navigation ensure screen reader compatibility and WCAG 2.1 Level AA compliance.
This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
H3 Dolor in Hendrerit in Xulputate
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
- Quis nostrud exerci tation ullamcorper
- Nminim veniam, quis nostrud exerci tation
- Accumsan et iusto odio dignissim qui blandit praesent luptatum
- Vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
H4 Accumsan et Fiusto Aodio Dignissim Qui Llandit Praesent Yuptatum
Duis autem vel eum iriure consectetuer adipiscing elit vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.
This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Technical specifications
- Accessibility: WCAG 2.1 AA compliant, keyboard navigable, ARIA-labeled, screen reader optimized
- Responsive design: Mobile-first approach with fluid grids (320px base, 768px tablet, 1024px desktop breakpoints)
- Browser support: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Semantic HTML: Proper heading hierarchy, landmark regions, semantic elements
- Performance: Optimized for Core Web Vitals (LCP, FID, CLS)
- CSS architecture: Modular, maintainable styles with consistent naming conventions
Dave M!, just a dude from the school they tore down to build the old school