🚧 Under Construction

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

Card Footer

View in Pattern Lab

HTML Markup

<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>

Overview

The Card Footer component displays metadata and attribution information at the bottom of a card. It typically includes an avatar image along with author name and modification date details.

Features

  • Flexible layout with row orientation
  • Consistent 12px padding around content
  • 8px gap between elements
  • Avatar integration with 32px size
  • Two-line metadata display
  • Semantic footer element

Usage

Use the Card Footer component to provide context about the card content, such as:

  • Content author or creator
  • Last modified date or time
  • File size or content type
  • View count or engagement metrics
  • Content status information

SCSS Imports

Main Component
@n8d/htwoo-core/components/cards