🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Document Card HTML

View in Pattern Lab

HTML Markup

<article class="hoo-doccard">
    <div class="hoo-cardhtml">
    </div>
    <div class="hoo-cardlocation">Marketing</div>
    <div class="hoo-cardtitle">
    </div>
    <footer class="hoo-cardfooter">
        <div class="hoo-avatar-32">
            <img src="/htwoo-core/images/mug-shots/astronaut-mugshot-001.jpg" alt="" class="hoo-avatar-img" height="32" width="32" loading="lazy">
        </div>
        <div class="hoo-cardfooter-data">
            <div class="hoo-cardfooter-name">Man on the moon</div>
            <div class="hoo-cardfooter-modified">Created a seconds ago</div>
        </div>
    </footer>
</article>

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