Card
Displays a card with header, content, and footer.
Default (Login)
Standard card used for a login form.
Login to your account
Enter your email below to login to your account
Size
Use the size input to set the card to sm.
Small Card
This card uses the small size variant.
The card component supports a size prop that can be set to "sm" for a more compact appearance.
Image & Action
Cards with images, overlays, and action buttons.
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.
Address Form
A more complex card layout featuring a multi-column form and select inputs.
Shipping Address
Enter your shipping address below.
User Settings
Card containing interactive elements like switches and primary action buttons.
User Profile Settings
Manage your account settings and preferences.
Image Gallery
Multiple cards arranged in a grid with hover animations.
Forest Path
A journey through the woods.
Explore the serene beauty of nature and find your inner peace.
Misty Forest
Lost in the morning fog.
The quiet mystery of a misty forest is a sight to behold.
Installation & Usage
Installation
Imports
Basic Skeleton
API Reference
Helm API
The helm components provide the styling for the card elements.
| Component / Directive | Selector | Description |
|---|---|---|
| HlmCard | hlm-card, [hlmCard] | The main container. Input: size: 'sm' | 'default' |
| HlmCardHeader | hlm-card-header, [hlmCardHeader] | Container for the title and description. |
| HlmCardTitle | hlm-card-title, [hlmCardTitle] | The main title of the card. |
| HlmCardDescription | hlm-card-description, [hlmCardDescription] | A descriptive text for the card. |
| HlmCardContent | hlm-card-content, [hlmCardContent] | The main content area of the card. |
| HlmCardFooter | hlm-card-footer, [hlmCardFooter] | Container for actions at the bottom of the card. |
| HlmCardAction | hlm-card-action, [hlmCardAction] | Optional action element within the header. |