Card

The Card component provides lightweight structured content containers using semantic slots.

Ignix Lite cards support avatars, metadata, actions, and flexible layouts without additional JavaScript.

---

Profile Card

Preview

Neha Sharma

Frontend Developer

Building accessible UI components.

Joined 2024

Code

<article>

  <img
    slot="avatar"
    src="https://i.pinimg.com/236x/da/fd/f2/dafdf25168edcb2f0e1d8702797946cc.jpg"
    alt="User"
  />

  <span slot="title">
    Neha Sharma
  </span>

  <span slot="meta">
    Frontend Developer
  </span>

  <p slot="body">
    Building accessible UI components.
  </p>

  <button slot="action">
    Follow
  </button>

  <span slot="footer">
    Joined 2024
  </span>

</article>

---

Preview

Alex Johnson

UI Designer

Creating modern design systems and scalable user experiences.

Active now

Code

<article>

  <img
    slot="avatar"
    src="https://i.pravatar.cc/100?img=12"
    alt="Profile"
  />

  <span slot="title">
    Alex Johnson
  </span>

  <span slot="meta">
    UI Designer
  </span>

  <p slot="body">
    Creating modern design systems and scalable user experiences.
  </p>

  <button slot="action">
    Message
  </button>

  <span slot="footer">
    Active now
  </span>

</article>

Usage

Product Card

Preview

Wireless Headphones

Audio Device

Premium wireless headphones with immersive sound quality.

In Stock

Code

<article>

  <img
    slot="avatar"
    src="https://picsum.photos/100"
    alt="Product"
  />

  <span slot="title">
    Wireless Headphones
  </span>

  <span slot="meta">
    Audio Device
  </span>

  <p slot="body">
    Premium wireless headphones with immersive sound quality.
  </p>

  <button slot="action">
    Buy Now
  </button>

  <span slot="footer">
    In Stock
  </span>

</article>

---

Slots

Slot	Description
slot="avatar"	Avatar or image content
slot="title"	Card heading
slot="meta"	Metadata or subtitle
slot="body"	Main content
slot="action"	Action button or controls
slot="footer"	Footer metadata