Skip to main content

Card

The ty-card component is a flexible and reusable container for content. It is ideal for showcasing information in a neat, card-like format, often used in profiles, product details, and various other applications.

Usage​

To use the ty-card component, wrap your content within its tags. You can use named slots for specific areas like headers, sub-headers, and actions:

Live Editor
<ty-card>
  <span slot="header">Card Header</span>
  <span slot="sub-head">Sub-header Content</span>
  Your main content here...

  <div slot="action">Action Buttons</div>
</ty-card>
Result
Loading...

API​

Slots​

  • header: For the card's main header.
  • sub-head: For additional header content.
  • action: For action buttons or links at the bottom of the card.