Body text and inline styles
Standard body text with inline elements for emphasis and linking. Link styles distinguish between internal navigation and external resources with visual indicators. All interactive elements maintain proper focus states for keyboard accessibility.
Lorem ipsum dolor sit amet, in-site hyperlink and external hyperlink, sed diam nonummy strong text ut laoreet dolore magna italic text. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.
Heading Hierarchy
Proper heading structure maintains document outline for screen readers and SEO. Font sizes, weights, and spacing scale proportionally across breakpoints.
H2 header
Ut wisi enim ad minim veniam, quis nostrud exerci tation. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at qui blandit praesent.
H3 header
Ut wisi enim ad minim veniam, quis nostrud exerci tation. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at qui blandit praesent.
H4 header
Ut wisi enim ad minim veniam, quis nostrud exerci tation. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at qui blandit praesent.
Image Layouts
Responsive image containers with multiple layout options using a standard 600 × 400 pixel aspect ratio (3:2). All images scale proportionally and include semantic figure/figcaption markup for proper association between images and their captions. Vertical formats are reserved for comic book pages and sketchbook artwork.
Variations
Image centered
Default centered layout with optional caption. Images maintain aspect ratio and scale to container width on smaller screens.
Ut wisi enim ad minim veniam, quis nostrud exerci tation. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at qui blandit praesent.
Image centered full width
Edge-to-edge layout that spans the full content width for maximum visual impact. Useful for hero images, featured artwork, or content that benefits from full horizontal space. Caption includes bottom border to visually separate from subsequent content.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Image float left, 1/3 width
Left-floated images allow text to wrap around on the right. Float clears on mobile breakpoints for better readability. Figures maintain margins for comfortable spacing between image and text content.
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Image float right, 1/4 width
Right-floated images mirror the left-float behavior with text wrapping on the left side. Both float patterns collapse to full-width centered images on mobile devices.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
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. ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, and vel illum.
Pullquotes
Visually distinct blockquote styling for emphasized quotations within article content. Uses definition list markup for proper semantic structure and attribution.
- This is a pullquote: "He kicked me so hard once at the top of the stairs that I landed halfway down. My teachers couldn't understand why I was a nervous wreck! My sister and I hated, hated him. We talked about killing him."
- Fletcher "Christy" Hanks Jr. on his father in 2007
Lightbox Gallery
Image gallery using Lightbox by Lokesh Dhakar. Supports both text links and thumbnail images with optional captions. Grouping controlled via data-lightbox attribute for related image sets. Keyboard navigable with arrow keys and ESC to close.
Works with text links and pictures, grouping controlled by using the same "data-lightbox" value. Optional captions come from "data-title" values. ut laoreet dolore magna aliquam erat volutpat.
Data Tables
Responsive table layouts with horizontal scroll on mobile devices. Header rows maintain sticky positioning on scroll for context. Zebra striping improves row scanning on longer tables.
| Person | City of Birth | Current City | Favorite City |
|---|---|---|---|
| Ernesto Trivoli | Naples with extra words to see what long text looks like | Rome | Naples |
| Margarita de Rosas | Mexico City | Los Angeles | New York |
| Kristin Mumfordson | Berlin | Stockholm | Cambridge |
| Samson Abrahamson | Tripoli | London | Jerusalem |
| Sahara Blackstone-Carver | Atlanta | Boise | Nairobi |
Lists
Standard unordered and ordered list styling with proper indentation and marker styles. Nested lists maintain hierarchy with adjusted margins and alternative markers.
Variations
Unordered list
- 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
Ordered list
- 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
Definition Lists
Semantic markup for term-definition pairs. Useful for glossaries, metadata, and FAQ-style content. Maintains proper association between terms and definitions for screen readers.
- Definition List One
- Duis autem vel eum iriure dolor in hendrerit. Sin vulputate velit esse molestie consequat.
- Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
- Definition List Two
- Color in hendrerit in vulputate velit esse molestie consequat. Evel illum dolore eu feugiat nulla facilisis at vero eros.
- Facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Dave M!, giving you all I’ve got.