🚧 Under Construction

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

Document Card Click

View in Pattern Lab

HTML Markup

<article class="hoo-doccard">
    <figure class="hoo-cardimage">
        <img src="/htwoo-core/images/card-images/coffee-image.jpg" width="320" height="180" alt="">
    </figure>
    <div class="hoo-cardlocation">Marketing</div>
    <div class="hoo-cardtitle">
    </div>
    <footer class="hoo-cardfooter">
        <div class="hoo-avatar">
            <img src="/htwoo-core/images/mug-shots/astronaut-mugshot-001.jpg" alt="" class="hoo-avatar-img" 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>
</div>

Document Card - Clickable

The Document Card Clickable variant provides enhanced click handling and interaction features while maintaining the core structure and functionality of the standard Document Card. This variant is optimized for scenarios requiring additional click behavior or custom interaction patterns.

Overview

This variant extends the basic Document Card with enhanced click handling capabilities, allowing for more sophisticated interaction patterns while preserving the adaptive layout and accessibility features of the standard card.

Features

  • Enhanced Click Handling: Additional click event processing and feedback
  • Custom Interaction: Support for complex interaction patterns
  • Adaptive Layout: Maintains flexible width and container adaptation
  • Standard Structure: Uses the same molecular components as base Document Card
  • Accessibility: Preserves keyboard navigation and screen reader support

Usage

Ideal for scenarios requiring:

  • Custom click analytics or tracking
  • Multi-action card interfaces
  • Specialized navigation patterns
  • Enhanced user feedback

Structure

Uses the same structure as the standard Document Card:

  1. Card Image: Visual preview or thumbnail
  2. Card Location: Source or category information
  3. Card Title: Document name or headline
  4. Card Footer: Author, date, and metadata

SCSS Import