Media

Axiom01 provides a robust approach to handling media assets and icons, ensuring your visuals are performant, responsive,...

Images

Axiom01 encourages the use of responsive images that adapt to any screen size and lazy loading for improved performance. We recommend modern formats like WebP for optimal compression.

Responsive Images

Axiom01 makes images responsive by default. Images will scale within their parent container without overflowing.

Example Responsive Image 
<img src="path/to/image.jpg" alt="Description">

Lazy Loading

For images below the fold, implement lazy loading to improve initial page load performance. This can be achieved natively with the loading="lazy" attribute or via JavaScript libraries for older browser support. 
<img src="path/to/image.jpg" alt="Description" loading="lazy">

Icons & SVGs

Home
Settings
Favorite 
<span class="axicon render" data-name="home" aria-hidden="true"></span>
				<button aria-label="Delete item"><span class="axicon render" data-name="trash" aria-hidden="true"></span></button>
Warning
Check 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
				<path d="..."/>
				</svg>

Accessibility Considerations

  • For decorative images, ensure alt="" or aria-hidden="true".
  • For meaningful images, provide descriptive alt text.
  • For icons, use aria-hidden="true" if purely decorative. If interactive or conveying meaning, provide a text alternative (e.g., visually hidden text, aria-label on parent element).

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Media component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.

Accessibility

Axiom01 ensures that the Media component meets strict WCAG standards out of the box:

  • Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
  • Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
  • Focus Management - Visible, high-contrast focus indicators without layout shifting.
  • Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
  • Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.