PineUiPhoenix.Card (Pine UI v0.1.3)
View SourceProvides card components for organizing content with various behaviors.
The Card module offers three main variants:
basic/1
- Simple card with title, subtitle, content area, and optional footerinteractive/1
- Card with hover animation effectscollapsible/1
- Expandable/collapsible card with toggle functionality
Examples
<PineUi.card title="User Profile" subtitle="Personal information">
<p>Card content here</p>
</PineUi.card>
<PineUi.card_interactive>
<p>This card has hover effects</p>
</PineUi.card_interactive>
<PineUi.card_collapsible title="Click to expand" open={false}>
<p>This content can be hidden</p>
</PineUi.card_collapsible>
Styling
Cards use TailwindCSS for styling and can be customized using the class
parameter.
Summary
Functions
Renders a basic card component.
Renders a collapsible card component with expand/collapse functionality.
Renders an interactive card component with hover effects.
Functions
Renders a basic card component.
Examples
<.basic title="Card Title">
<p>Content goes here</p>
</.basic>
<.basic title="Card with Footer" subtitle="With explanation" footer="Last updated: Yesterday">
<p>Content goes here</p>
</.basic>
Options
:title
- Card title text (optional):subtitle
- Card subtitle text (optional):footer
- Footer content (optional):padded
- Whether to add padding to the body (optional, defaults to true):class
- Additional CSS classes for the card container (optional)
Renders a collapsible card component with expand/collapse functionality.
This card can be toggled between expanded and collapsed states by clicking on the header. Uses AlpineJS for the toggle functionality.
Examples
<.collapsible title="Click to toggle">
<p>This content can be hidden</p>
</.collapsible>
<.collapsible title="Initially expanded" open={true}>
<p>This content is visible by default</p>
</.collapsible>
Options
:title
- Card title text (optional):subtitle
- Card subtitle text (optional):footer
- Footer content (optional):padded
- Whether to add padding to the body (optional, defaults to true):open
- Whether the card is expanded on initial render (optional, defaults to false):class
- Additional CSS classes for the card container (optional)
Renders an interactive card component with hover effects.
This card variant adds subtle animation effects when hovered, making it ideal for clickable cards or emphasizing important content.
Examples
<.interactive>
<p>Hover over me to see effects</p>
</.interactive>
<.interactive title="Interactive Card" subtitle="With animations">
<p>Content with hover effects</p>
</.interactive>
Options
:title
- Card title text (optional):subtitle
- Card subtitle text (optional):footer
- Footer content (optional):padded
- Whether to add padding to the body (optional, defaults to true):class
- Additional CSS classes for the card container (optional)