Typography

Headings

Heading 1 - Main Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Minor Heading

Heading 5 - Small Heading

Heading 6 - Smallest Heading

Text Elements

This is a regular paragraph with strong text, emphasized text, and a link. It demonstrates the typography and line height of the theme.

Here's another paragraph with inline code and highlighted text. The theme provides excellent readability with proper spacing and contrast.

This is a blockquote. It represents a section that is quoted from another source. The styling should make it visually distinct from regular paragraphs.
— Author Name

Lists

Unordered List

First list item
Second list item with a link
Third list item with strong text
Nested list:
- Nested item 1
- Nested item 2

Ordered List

First ordered item
Second ordered item
Third ordered item with nested list:
1. Nested ordered item 1
2. Nested ordered item 2

Code

// This is a code block
function example() {
  console.log("Hello, Quesby Boilerplate!");
  return true;
}

Inline code elements are styled differently from code blocks.

Buttons & Interactive Elements

Button Styles

Link as Button

Form Elements

Form States

Error State

This field has an error

Success State

This field is valid

Info Message

This is an info message

Warning Message

This is an info message

Tables

Basic Table

Name	Email	Role	Status
John Doe	john@example.com	Developer	Active
Jane Smith	jane@example.com	Designer	Active
Bob Johnson	bob@example.com	Manager	Inactive
Total			3

Media Elements

Images

Video

Navigation Elements

Breadcrumbs

Pagination

Card Components

Blog Post Cards

January 15, 2024

Sample Blog Post

This is a sample blog post excerpt that demonstrates the styling of post cards in the Quesby Boilerplate theme.

January 10, 2024

Another Blog Post

Another example of a blog post card with different content to show the consistent styling.

Alerts & Messages

Error: This is an error message with important information.

Success: This is a success message indicating a positive outcome.

Info: This is an informational message with helpful details.

Warning: This is a warning message with important information.

Theme Demonstration

This showcase demonstrates all HTML elements across different themes. Use the theme toggle in the header to switch between:

Light Theme: Clean, bright interface
Dark Theme: Easy on the eyes for low-light environments
Sepia Theme: Warm, paper-like appearance

All elements automatically adapt to the selected theme using CSS custom properties and the theme system built into Quesby Boilerplate.

Accessibility Features

Semantic HTML

This showcase uses semantic HTML elements for better accessibility:

<main> for main content
<section> for content sections
<article> for blog posts
<nav> for navigation
<header> and <footer> for page structure
<figure> and <figcaption> for images

ARIA Labels

Interactive elements include proper ARIA labels and roles for screen readers and assistive technologies.

Style Guide