---
title: Document Card HTML
order: 12
---

# Document Card - HTML

The Document Card HTML variant supports rich HTML content display within the card structure, enabling more complex content layouts while maintaining the consistent visual design and adaptive behavior of the standard Document Card system.

## Overview

This variant extends the Document Card to support rich HTML content, allowing for formatted text, embedded media, and complex layouts within the card structure. It maintains the same responsive behavior and accessibility features while enabling enhanced content presentation.

## Features

- **Rich HTML Content**: Support for formatted HTML content and embedded elements
- **Adaptive Layout**: Maintains flexible width and container adaptation  
- **Enhanced Content**: Complex layouts with mixed media and formatted text
- **Standard Structure**: Builds on the same molecular component foundation
- **Theme Integration**: Inherits HTWOO theme styling and color schemes

## Usage

Ideal for scenarios requiring:
- Formatted text content with HTML markup
- Embedded media within card content
- Complex content layouts beyond simple text
- Rich content previews and presentations

## Structure

Extends the standard Document Card structure to accommodate HTML content:
1. **Card Image**: Visual preview or thumbnail (standard)
2. **Card Location**: Source or category information (standard)
3. **Card Title**: Document name or headline (standard)
4. **Card Content**: Rich HTML content area (enhanced)
5. **Card Footer**: Author, date, and metadata (standard)

## Content Guidelines

### HTML Content
- Use semantic HTML elements for proper structure
- Maintain consistent typography hierarchy
- Ensure accessibility with proper ARIA labels
- Test content with various lengths and formats

### Media Integration
- Optimize images and media for card dimensions
- Provide appropriate alt text for accessibility
- Consider loading performance with rich content
- Maintain responsive behavior across screen sizes

## SCSS Import