Sample Content Page

This page demonstrates all common webpage components and layout patterns.

Typography

This section demonstrates various heading levels and text styles.

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Component Title

Heading 5 - Minor Heading
Heading 6 - Small Heading

This is a standard paragraph with bold text, italic text, and a hyperlink. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Another paragraph to demonstrate spacing and flow. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lists

Unordered List

  • First item in the list
  • Second item in the list
  • Third item with nested list:
    • Nested item 1
    • Nested item 2
  • Fourth item in the list

Ordered List

  1. First step in the process
  2. Second step in the process
  3. Third step with nested steps:
    1. Substep A
    2. Substep B
  4. Final step in the process

Buttons

Various button styles and states:

Link as Button

Card Grid Layouts

2-Column Grid

Card Title 1

This is a card component with some descriptive text. Cards are great for organizing content into digestible chunks.

Card Title 2

Another card demonstrating the grid layout system. These cards will stack on mobile devices.

3-Column Grid

Feature 1

Short description of this feature or service offering.

Feature 2

Short description of this feature or service offering.

Feature 3

Short description of this feature or service offering.

4-Column Grid

Item 1

Brief text

Item 2

Brief text

Item 3

Brief text

Item 4

Brief text

Image + Text Layouts

Image Left, Text Right

[Image Placeholder]

Section Title

This layout places an image on the left with text content on the right. It's perfect for showcasing services, products, or explaining processes.

The content flows naturally and creates a balanced visual composition. On mobile devices, the image will stack above the text.

Text Left, Image Right

Another Section

This is the reverse layout with text on the left and image on the right. Alternating these layouts creates visual variety on your pages.

  • Benefit one of this approach
  • Benefit two of this approach
  • Benefit three of this approach

[Image Placeholder]

Dark Section Variant

Sections can have dark backgrounds for visual contrast and emphasis. This is achieved using the section-dark class.

Feature A

Dark sections work great for highlighting key information or calls to action.

Feature B

The contrast makes content stand out and draws visitor attention.

Feature C

Use sparingly for maximum impact throughout your website.

Call-to-Action Example

This is a centered call-to-action section that encourages visitors to take action. It typically includes a headline, supporting text, and prominent buttons.

Primary Action Secondary Action

Full-Width Gradient Section

Sections can span the full width of the viewport while keeping content centered within the container for optimal readability and visual impact.

Utility Classes

Spacing Utilities

Small bottom margin (mb-sm)

Medium bottom margin (mb-md)

Large bottom margin (mb-lg)

Small top margin (mt-sm)

Medium top margin (mt-md)

Text Alignment

Left aligned text (default)

Center aligned text

Right aligned text