Cards - Launchpad

Basic Cards

Header + Body + Footer

This card has all three sections: header, body, and footer.

Body Only

A simple card with just a body section.

Header + Body

Card with header and body, no footer.

<div class="lp-row lp-g-4">
    <div class="lp-col-md-4">
        <div class="lp-card">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Header + Body + Footer</h5></div>
            <div class="lp-card-body"><p>This card has all three sections: header, body, and footer.</p></div>
            <div class="lp-card-footer"><button class="lp-btn lp-btn--sm lp-btn--primary">Action</button></div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card">
            <div class="lp-card-body"><h6>Body Only</h6><p>A simple card with just a body section.</p></div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Header + Body</h5></div>
            <div class="lp-card-body"><p>Card with header and body, no footer.</p></div>
        </div>
    </div>
</div>

Card Styles

Flat

No border, subtle shadow.

Elevated

No border, medium shadow.

Bordered

Border visible, no shadow.

Hover

Shadow appears on hover.

Clickable

Pointer cursor with hover/active shadow.

<div class="lp-row lp-g-4">
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--flat">
            <div class="lp-card-body"><h6>Flat</h6><p>No border, subtle shadow.</p></div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--elevated">
            <div class="lp-card-body"><h6>Elevated</h6><p>No border, medium shadow.</p></div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--bordered">
            <div class="lp-card-body"><h6>Bordered</h6><p>Border visible, no shadow.</p></div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--hover">
            <div class="lp-card-body"><h6>Hover</h6><p>Shadow appears on hover.</p></div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--clickable">
            <div class="lp-card-body"><h6>Clickable</h6><p>Pointer cursor with hover/active shadow.</p></div>
        </div>
    </div>
</div>

Accent Bars — Left (Default)

Primary

Left accent bar.

Secondary

Left accent bar.

Success

Left accent bar.

Danger

Left accent bar.

Warning

Left accent bar.

Info

Left accent bar.

Dark

Left accent bar.

Light

Left accent bar.

<div class="lp-card lp-card--primary">...</div>
<div class="lp-card lp-card--secondary">...</div>
<div class="lp-card lp-card--success">...</div>
<div class="lp-card lp-card--danger">...</div>
<div class="lp-card lp-card--warning">...</div>
<div class="lp-card lp-card--info">...</div>
<div class="lp-card lp-card--dark">...</div>
<div class="lp-card lp-card--light">...</div>

Accent Bars — Other Sides

Add .lp-card--accent-{right|top|bottom} to change the accent bar position.

Left

Default position.

Right

Right accent bar.

Top

Top accent bar.

Bottom

Bottom accent bar.

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-card--accent-{right|top|bottom}</code> to change the accent bar position.</p>
<div class="lp-row lp-g-4">
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--primary">
            <div class="lp-card-body"><h6>Left</h6><p>Default position.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--accent-right lp-card--success">
            <div class="lp-card-body"><h6>Right</h6><p>Right accent bar.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--accent-top lp-card--danger">
            <div class="lp-card-body"><h6>Top</h6><p>Top accent bar.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--accent-bottom lp-card--info">
            <div class="lp-card-body"><h6>Bottom</h6><p>Bottom accent bar.</p></div>
        </div>
    </div>
</div>

Corner Accents

Add .lp-card--corner-accent-{tl|tr|bl|br} for a colored corner mark.

Top Left

Corner accent.

Top Right

Corner accent.

Bottom Left

Corner accent.

Bottom Right

Corner accent.

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-card--corner-accent-{tl|tr|bl|br}</code> for a colored corner mark.</p>
<div class="lp-row lp-g-4">
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--corner-accent-tl lp-card--primary">
            <div class="lp-card-body"><h6>Top Left</h6><p>Corner accent.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--corner-accent-tr lp-card--success">
            <div class="lp-card-body"><h6>Top Right</h6><p>Corner accent.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--corner-accent-bl lp-card--danger">
            <div class="lp-card-body"><h6>Bottom Left</h6><p>Corner accent.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--corner-accent-br lp-card--warning">
            <div class="lp-card-body"><h6>Bottom Right</h6><p>Corner accent.</p></div>
        </div>
    </div>
</div>

Edge Accents

Add .lp-card--accent-edge to place a flush partial bar on the card edge (no inset, no rounding).

Left Edge

Flush left bar.

Right Edge

Flush right bar.

Top Edge

Flush top bar.

Bottom Edge

Flush bottom bar.

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-card--accent-edge</code> to place a flush partial bar on the card edge (no inset, no rounding).</p>
<div class="lp-row lp-g-4">
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--accent-edge lp-card--primary">
            <div class="lp-card-body"><h6>Left Edge</h6><p>Flush left bar.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--accent-edge lp-card--accent-right lp-card--success">
            <div class="lp-card-body"><h6>Right Edge</h6><p>Flush right bar.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--accent-edge lp-card--accent-top lp-card--danger">
            <div class="lp-card-body"><h6>Top Edge</h6><p>Flush top bar.</p></div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card lp-card--accent-edge lp-card--accent-bottom lp-card--info">
            <div class="lp-card-body"><h6>Bottom Edge</h6><p>Flush bottom bar.</p></div>
        </div>
    </div>
</div>

Border Variants

Full 1px colored border with .lp-card--border-{color}.

Primary

Secondary

Success

Danger

Warning

Info

Dark

Light

<div class="lp-card lp-card--border-primary">...</div>
<div class="lp-card lp-card--border-secondary">...</div>
<div class="lp-card lp-card--border-success">...</div>
<div class="lp-card lp-card--border-danger">...</div>
<div class="lp-card lp-card--border-warning">...</div>
<div class="lp-card lp-card--border-info">...</div>
<div class="lp-card lp-card--border-dark">...</div>
<div class="lp-card lp-card--border-light">...</div>

Thick Border Variants

Full 3px colored border with .lp-card--thickborder-{color}.

Primary

Secondary

Success

Danger

Warning

Info

Dark

Light

<div class="lp-card lp-card--thickborder-primary">...</div>
<div class="lp-card lp-card--thickborder-secondary">...</div>
<div class="lp-card lp-card--thickborder-success">...</div>
<div class="lp-card lp-card--thickborder-danger">...</div>
<div class="lp-card lp-card--thickborder-warning">...</div>
<div class="lp-card lp-card--thickborder-info">...</div>
<div class="lp-card lp-card--thickborder-dark">...</div>
<div class="lp-card lp-card--thickborder-light">...</div>

Background Color Cards

Full card color with .lp-card--bg-{color}.

Primary

Full background color card.

Secondary

Full background color card.

Success

Full background color card.

Danger

Full background color card.

Warning

Full background color card.

Info

Full background color card.

Dark

Full background color card.

Light

Full background color card.

<div class="lp-card lp-card--bg-primary">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Primary</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>
<div class="lp-card lp-card--bg-secondary">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Secondary</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>
<div class="lp-card lp-card--bg-success">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Success</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>
<div class="lp-card lp-card--bg-danger">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Danger</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>
<div class="lp-card lp-card--bg-warning">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Warning</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>
<div class="lp-card lp-card--bg-info">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Info</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>
<div class="lp-card lp-card--bg-dark">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Dark</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>
<div class="lp-card lp-card--bg-light">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Light</h5></div>
  <div class="lp-card-body"><p>Full background color card.</p></div>
</div>

Header Colors

Solid header background with .lp-card--header-{color}.

Primary

Colored header card.

Secondary

Colored header card.

Success

Colored header card.

Danger

Colored header card.

Warning

Colored header card.

Info

Colored header card.

Dark

Colored header card.

Light

Colored header card.

<div class="lp-card lp-card--header-primary">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Primary</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-secondary">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Secondary</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-success">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Success</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-danger">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Danger</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-warning">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Warning</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-info">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Info</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-dark">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Dark</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-light">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Light</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>

Soft Header Colors

Subtle header background with .lp-card--header-soft-{color}.

Primary

Soft header card.

Secondary

Soft header card.

Success

Soft header card.

Danger

Soft header card.

Warning

Soft header card.

Info

Soft header card.

Dark

Soft header card.

Light

Soft header card.

<div class="lp-card lp-card--header-soft-primary">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Primary</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-soft-secondary">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Secondary</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-soft-success">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Success</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-soft-danger">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Danger</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-soft-warning">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Warning</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-soft-info">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Info</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-soft-dark">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Dark</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>
<div class="lp-card lp-card--header-soft-light">
  <div class="lp-card-header"><h5 class="lp-card-header-title">Light</h5></div>
  <div class="lp-card-body"><p>Content here.</p></div>
</div>

Borderless Sections

Header Borderless

No header bottom border.

Footer

Both Borderless

No section borders at all.

Footer

<div class="lp-row lp-g-4">
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--header-borderless">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Header Borderless</h5></div>
            <div class="lp-card-body"><p>No header bottom border.</p></div>
            <div class="lp-card-footer">Footer</div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--footer-borderless">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Footer Borderless</h5></div>
            <div class="lp-card-body"><p>No footer top border.</p></div>
            <div class="lp-card-footer">Footer</div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--borderless-sections">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Both Borderless</h5></div>
            <div class="lp-card-body"><p>No section borders at all.</p></div>
            <div class="lp-card-footer">Footer</div>
        </div>
    </div>
</div>

Spacing Modes

Compact

Reduced padding for dense layouts.

Footer

Default

Standard padding.

Footer

Spacious

Extra breathing room.

Footer

<div class="lp-row lp-g-4">
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--compact">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Compact</h5></div>
            <div class="lp-card-body"><p>Reduced padding for dense layouts.</p></div>
            <div class="lp-card-footer">Footer</div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Default</h5></div>
            <div class="lp-card-body"><p>Standard padding.</p></div>
            <div class="lp-card-footer">Footer</div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card lp-card--spacious">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Spacious</h5></div>
            <div class="lp-card-body"><p>Extra breathing room.</p></div>
            <div class="lp-card-footer">Footer</div>
        </div>
    </div>
</div>

Footer Alignment

Start

Center

End

Between

<div class="lp-row lp-g-4">
    <div class="lp-col-md-3">
        <div class="lp-card">
            <div class="lp-card-body"><p>Start</p></div>
            <div class="lp-card-footer lp-card-footer--start">
                <button class="lp-btn lp-btn--sm lp-btn--primary">Save</button>
                <button class="lp-btn lp-btn--sm lp-btn--outline-secondary">Cancel</button>
            </div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card">
            <div class="lp-card-body"><p>Center</p></div>
            <div class="lp-card-footer lp-card-footer--center">
                <button class="lp-btn lp-btn--sm lp-btn--primary">Save</button>
                <button class="lp-btn lp-btn--sm lp-btn--outline-secondary">Cancel</button>
            </div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card">
            <div class="lp-card-body"><p>End</p></div>
            <div class="lp-card-footer lp-card-footer--end">
                <button class="lp-btn lp-btn--sm lp-btn--primary">Save</button>
                <button class="lp-btn lp-btn--sm lp-btn--outline-secondary">Cancel</button>
            </div>
        </div>
    </div>
    <div class="lp-col-md-3">
        <div class="lp-card">
            <div class="lp-card-body"><p>Between</p></div>
            <div class="lp-card-footer lp-card-footer--between">
                <button class="lp-btn lp-btn--sm lp-btn--outline-secondary">Cancel</button>
                <button class="lp-btn lp-btn--sm lp-btn--primary">Save</button>
            </div>
        </div>
    </div>
</div>

Cards with Images

Image Top

Image placed above the card body.

Image Bottom

Image placed below the card body.

<div class="lp-row lp-g-4">
    <div class="lp-col-md-4">
        <div class="lp-card">
            <img class="lp-card-img lp-card-img--top" src="https://picsum.photos/400/200?random=1" alt="Image Top">
            <div class="lp-card-body"><h6>Image Top</h6><p>Image placed above the card body.</p></div>
        </div>
    </div>
    <div class="lp-col-md-4">
        <div class="lp-card">
            <div class="lp-card-body"><h6>Image Bottom</h6><p>Image placed below the card body.</p></div>
            <img class="lp-card-img lp-card-img--bottom" src="https://picsum.photos/400/200?random=2" alt="Image Bottom">
        </div>
    </div>
</div>

Horizontal Card

Horizontal Layout

Image on the left, content on the right. Stacks vertically on mobile.

<div class="lp-row lp-g-4">
    <div class="lp-col-md-6">
        <div class="lp-card lp-card--horizontal">
            <img class="lp-card-img" src="https://picsum.photos/200/200?random=3" alt="Horizontal">
            <div class="lp-card-content">
                <div class="lp-card-body">
                    <h6>Horizontal Layout</h6>
                    <p>Image on the left, content on the right. Stacks vertically on mobile.</p>
                </div>
                <div class="lp-card-footer">
                    <button class="lp-btn lp-btn--sm lp-btn--primary">View</button>
                </div>
            </div>
        </div>
    </div>
</div>

Image Overlay

Overlay Title

Content appears over the image with a gradient background.

<div class="lp-row lp-g-4">
    <div class="lp-col-md-6">
        <div class="lp-card lp-card--has-overlay">
            <img class="lp-card-img" src="https://picsum.photos/600/250?random=4" alt="Overlay">
            <div class="lp-card-overlay">
                <h5>Overlay Title</h5>
                <p>Content appears over the image with a gradient background.</p>
            </div>
        </div>
    </div>
</div>

Card Group

Side-by-side cards with .lp-card-group.

Card One

First card in group.

Card Two

Second card in group.

Card Three

Third card in group.

<p class="lp-text-sm lp-text-muted lp-mb-3">Side-by-side cards with <code class="lp-text-danger">.lp-card-group</code>.</p>
<div class="lp-card-group">
    <div class="lp-card">
        <div class="lp-card-body"><h6>Card One</h6><p>First card in group.</p></div>
    </div>
    <div class="lp-card">
        <div class="lp-card-body"><h6>Card Two</h6><p>Second card in group.</p></div>
    </div>
    <div class="lp-card">
        <div class="lp-card-body"><h6>Card Three</h6><p>Third card in group.</p></div>
    </div>
</div>

Overflow Visible

Add .lp-card--overflow-visible when child elements (dropdowns, datepickers) need to overflow.

Overflow Visible

Dropdowns and floating elements can overflow this card boundary.

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-card--overflow-visible</code> when child elements (dropdowns, datepickers) need to overflow.</p>
<div class="lp-row">
    <div class="lp-col-md-6">
        <div class="lp-card lp-card--overflow-visible">
            <div class="lp-card-header"><h5 class="lp-card-header-title">Overflow Visible</h5></div>
            <div class="lp-card-body"><p>Dropdowns and floating elements can overflow this card boundary.</p></div>
        </div>
    </div>
</div>

Collapsible Cards

Use data-lp-action="collapse" on a button in the header actions.

Collapsible Card

Click the collapse button to hide this content. Click again to show it.

This footer also hides when collapsed.

<p class="lp-text-sm lp-text-muted lp-mb-3">Use <code class="lp-text-danger">data-lp-action="collapse"</code> on a button in the header actions.</p>
<div class="lp-row lp-g-4">
    <div class="lp-col-md-6">
        <div class="lp-card" data-lp-component="card">
            <div class="lp-card-header">
                <h5 class="lp-card-header-title">Collapsible Card</h5>
                <div class="lp-card-header-actions">
                    <button class="lp-card-action-btn" data-lp-action="collapse" title="Toggle collapse">
                        <span class="material-symbols-outlined">expand_less</span>
                    </button>
                </div>
            </div>
            <div class="lp-card-body"><p>Click the collapse button to hide this content. Click again to show it.</p></div>
            <div class="lp-card-footer">This footer also hides when collapsed.</div>
        </div>
    </div>
</div>

Card Actions

Combine multiple actions: collapse, refresh, fullscreen, close.

All Actions

This card demonstrates all four action buttons. Try each one:

Collapse — hides body and footer
Refresh — shows loading spinner
Fullscreen — fills the viewport (ESC to exit)
Close — removes with confirmation

Card footer content

Refresh Only

This card only has a refresh button. Click to see the loading spinner overlay.

<p class="lp-text-sm lp-text-muted lp-mb-3">Combine multiple actions: <code class="lp-text-danger">collapse</code>, <code class="lp-text-danger">refresh</code>, <code class="lp-text-danger">fullscreen</code>, <code class="lp-text-danger">close</code>.</p>
<div class="lp-row lp-g-4">
    <div class="lp-col-md-6">
        <div class="lp-card" data-lp-component="card">
            <div class="lp-card-header">
                <h5 class="lp-card-header-title">All Actions</h5>
                <div class="lp-card-header-actions">
                    <button class="lp-card-action-btn" data-lp-action="collapse" title="Collapse">
                        <span class="material-symbols-outlined">expand_less</span>
                    </button>
                    <button class="lp-card-action-btn" data-lp-action="refresh" title="Refresh">
                        <span class="material-symbols-outlined">refresh</span>
                    </button>
                    <button class="lp-card-action-btn" data-lp-action="fullscreen" title="Fullscreen">
                        <span class="material-symbols-outlined">fullscreen</span>
                    </button>
                    <button class="lp-card-action-btn" data-lp-action="close" data-lp-confirm="Are you sure you want to close this card?" title="Close">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                </div>
            </div>
            <div class="lp-card-body">
                <p>This card demonstrates all four action buttons. Try each one:</p>
                <ul>
                    <li><strong>Collapse</strong> — hides body and footer</li>
                    <li><strong>Refresh</strong> — shows loading spinner</li>
                    <li><strong>Fullscreen</strong> — fills the viewport (ESC to exit)</li>
                    <li><strong>Close</strong> — removes with confirmation</li>
                </ul>
            </div>
            <div class="lp-card-footer">Card footer content</div>
        </div>
    </div>
    <div class="lp-col-md-6">
        <div class="lp-card" data-lp-component="card">
            <div class="lp-card-header">
                <h5 class="lp-card-header-title">Refresh Only</h5>
                <div class="lp-card-header-actions">
                    <button class="lp-card-action-btn" data-lp-action="refresh" title="Refresh">
                        <span class="material-symbols-outlined">refresh</span>
                    </button>
                </div>
            </div>
            <div class="lp-card-body"><p>This card only has a refresh button. Click to see the loading spinner overlay.</p></div>
        </div>
    </div>
</div>

Draggable Cards

Drag-and-drop reordering with data-lp-component="dragdrop". Uses .lp-drag-handle and persists order to localStorage.

Card 1

Drag this card by the handle to reorder.

Card 2

Order is saved to localStorage.

Card 3

Refresh the page to see persisted order.

Card 4

Each card combines drag-and-drop with card actions.

<p class="lp-text-sm lp-text-muted lp-mb-3">Drag-and-drop reordering with <code class="lp-text-danger">data-lp-component="dragdrop"</code>. Uses <code class="lp-text-danger">.lp-drag-handle</code> and persists order to localStorage.</p>
<div class="lp-row" data-lp-component="dragdrop" data-lp-items=".lp-col-md-6" data-lp-handle=".lp-drag-handle" data-lp-storage="local" data-lp-storage-key="demo-cards-order" id="drag-demo">
    <div class="lp-col-md-6 lp-mb-4" data-id="card-1">
        <div class="lp-card" data-lp-component="card">
            <div class="lp-card-header">
                <span class="lp-drag-handle" title="Drag to reorder"></span>
                <h5 class="lp-card-header-title">Card 1</h5>
                <div class="lp-card-header-actions">
                    <button class="lp-card-action-btn" data-lp-action="collapse" title="Collapse">
                        <span class="material-symbols-outlined">expand_less</span>
                    </button>
                </div>
            </div>
            <div class="lp-card-body"><p>Drag this card by the handle to reorder.</p></div>
        </div>
    </div>
    <div class="lp-col-md-6 lp-mb-4" data-id="card-2">
        <div class="lp-card" data-lp-component="card">
            <div class="lp-card-header">
                <span class="lp-drag-handle" title="Drag to reorder"></span>
                <h5 class="lp-card-header-title">Card 2</h5>
                <div class="lp-card-header-actions">
                    <button class="lp-card-action-btn" data-lp-action="collapse" title="Collapse">
                        <span class="material-symbols-outlined">expand_less</span>
                    </button>
                </div>
            </div>
            <div class="lp-card-body"><p>Order is saved to localStorage.</p></div>
        </div>
    </div>
    <div class="lp-col-md-6 lp-mb-4" data-id="card-3">
        <div class="lp-card" data-lp-component="card">
            <div class="lp-card-header">
                <span class="lp-drag-handle" title="Drag to reorder"></span>
                <h5 class="lp-card-header-title">Card 3</h5>
                <div class="lp-card-header-actions">
                    <button class="lp-card-action-btn" data-lp-action="collapse" title="Collapse">
                        <span class="material-symbols-outlined">expand_less</span>
                    </button>
                </div>
            </div>
            <div class="lp-card-body"><p>Refresh the page to see persisted order.</p></div>
        </div>
    </div>
    <div class="lp-col-md-6 lp-mb-4" data-id="card-4">
        <div class="lp-card" data-lp-component="card">
            <div class="lp-card-header">
                <span class="lp-drag-handle" title="Drag to reorder"></span>
                <h5 class="lp-card-header-title">Card 4</h5>
                <div class="lp-card-header-actions">
                    <button class="lp-card-action-btn" data-lp-action="collapse" title="Collapse">
                        <span class="material-symbols-outlined">expand_less</span>
                    </button>
                </div>
            </div>
            <div class="lp-card-body"><p>Each card combines drag-and-drop with card actions.</p></div>
        </div>
    </div>
</div>

CSS Reference

Class	Description
`.lp-card`	Base card container
`.lp-card-header`	Card header section
`.lp-card-header-title`	Title text in header
`.lp-card-header-actions`	Action buttons area in header
`.lp-card-action-btn`	Individual action button
`.lp-card-body`	Card body/content section
`.lp-card-footer`	Card footer section
`.lp-card-footer--{start\|center\|end\|between}`	Footer alignment
`.lp-card-img`	Card image
`.lp-card-img--top`	Image at top with rounded corners
`.lp-card-img--bottom`	Image at bottom with rounded corners
`.lp-card--flat`	No border, subtle shadow
`.lp-card--elevated`	No border, medium shadow
`.lp-card--bordered`	Border, no shadow
`.lp-card--hover`	Shadow on hover
`.lp-card--clickable`	Pointer cursor with hover/active shadow
`.lp-card--{color}`	Left accent border (primary, secondary, success, danger, warning, info, dark, light)
`.lp-card--border-{color}`	Full 1px colored border
`.lp-card--thickborder-{color}`	Full 3px colored border
`.lp-card--bg-{color}`	Full background color card
`.lp-card--header-{color}`	Solid header background color
`.lp-card--header-soft-{color}`	Subtle header background color
`.lp-card--header-borderless`	Remove header bottom border
`.lp-card--footer-borderless`	Remove footer top border
`.lp-card--borderless-sections`	Remove both section borders
`.lp-card--compact`	Reduced padding
`.lp-card--spacious`	Increased padding
`.lp-card--overflow-visible`	Allow child overflow
`.lp-card--horizontal`	Horizontal layout (image + content)
`.lp-card-content`	Content wrapper for horizontal layout
`.lp-card--has-overlay`	Card with image overlay
`.lp-card-overlay`	Gradient overlay on image
`.lp-card-group`	Flex container for grouped cards
`.lp-card--loading`	Loading state with spinner overlay
`.lp-card--fullscreen`	Fullscreen state
`.lp-card--collapsed`	Collapsed state (hides body/footer)
`data-lp-component="card"`	Auto-init card JS component
`data-lp-action="collapse"`	Toggle collapse on click
`data-lp-action="refresh"`	Trigger refresh/loading on click
`data-lp-action="fullscreen"`	Toggle fullscreen on click
`data-lp-action="close"`	Close card on click
`data-lp-confirm="msg"`	Confirmation dialog before close
`data-lp-component="dragdrop"`	Auto-init drag-drop on container
`.lp-drag-handle`	Drag handle element