SVX Blocks

Component Showcase

This page demonstrates all available SVX block components that can be used to build page content.

Block Components Overview

SVX block components are UI-based elements that go in the <main> element to construct pages. They follow strict naming conventions and patterns to ensure consistency across the application.

SVXBlockHeader

The Header block is used to create page headers with title, subtitle, and description.

Example Header

With subtitle

This is an example description for the header block component.

SVXBlockHeading

The Heading block is used to create section headings with different levels (h1-h6).

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

SVXBlockParagraph

The Paragraph block is used to create text paragraphs with various styling options.

This is a standard paragraph block. It can contain text and inline elements.

This is a lead paragraph with larger text for emphasis.

This is a small paragraph with smaller text for less emphasis.

This is a muted paragraph with a more subtle text color.

SVXBlockImage

The Image block is used to display images with optional captions and alt text.

SVX Logo
Example image with caption

SVXBlockFigure

The Figure block is used to create figure elements with images and captions.

SVX Logo
Example figure with caption

SVXBlockArticle

The Article block is used to group related content in an article element.

Article Example

This is an example of content inside an article block. Articles can contain headings, paragraphs, images, and other block components.

SVXBlockSection

The Section block is used to create page sections that group related content.

Section Example

This is an example of content inside a section block. Sections can contain headings, paragraphs, articles, and other block components.

Usage Guidelines

When using SVX block components, follow these guidelines:

  • Use semantic blocks appropriate for the content structure
  • Maintain consistent nesting patterns (Section → Article → content blocks)
  • Use appropriate heading levels for document outline
  • Follow SVX naming conventions for custom classes
  • Ensure all images have proper alt text for accessibility