• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Default
  2. Size
  3. Shadow
  4. Shadow interactive
  5. Properties
Components Card

ld-card #

The ld-card component can be used to list content in visually clearly separated and highlighted areas.

Default #

<ld-card>
  <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
</ld-card>
<div class="ld-card">
  <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
</div>
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Size #

The size prop effects the card padding only.

<ld-card>
  <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
</ld-card>

<ld-card size="sm">
  <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
</ld-card>
<div class="ld-card">
  <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
</div>

<div class="ld-card ld-card--sm">
  <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
</div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Shadow #

<ld-card>
  <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
</ld-card>

<ld-card shadow="active">
  <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
</ld-card>

<ld-card shadow="hover">
  <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
</ld-card>

<ld-card shadow="sticky">
  <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
</ld-card>
<div class="ld-card">
  <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
</div>

<div class="ld-card ld-card--active">
  <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
</div>

<div class="ld-card ld-card--hover">
  <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
</div>

<div class="ld-card ld-card--sticky">
  <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
</div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Shadow interactive #

Use the shadow-interactive prop for a transition to a different shadow on hover and focus-within.

<ld-card shadow-interactive="sticky">
  <ld-typo style="margin-bottom: 1rem">Lorem ipsum dolor sit amet.</ld-typo>
  <ld-button mode="highlight">Click me</ld-button>
</ld-card>

<ld-card shadow="sticky" shadow-interactive="stacked">
  <ld-typo style="margin-bottom: 1rem">Lorem ipsum dolor sit amet.</ld-typo>
  <ld-button mode="highlight">Click me</ld-button>
</ld-card>
<div class="ld-card ld-card--interactive-sticky">
  <p class="ld-typo ld-typo--body-m" style="margin-bottom: 1rem">Lorem ipsum dolor sit amet.</p>
  <button class="ld-button ld-button--highlight">Click me</button>
</div>

<div class="ld-card ld-card--sticky ld-card--interactive-stacked">
  <p class="ld-typo ld-typo--body-m" style="margin-bottom: 1rem">Lorem ipsum dolor sit amet.</p>
  <button class="ld-button ld-button--highlight">Click me</button>
</div>
Lorem ipsum dolor sit amet. Click me Lorem ipsum dolor sit amet. Click me

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined
shadow shadow Simulates card elevation by setting the size of the card box shadow. "active" | "hover" | "stacked" | "sticky" 'stacked'
shadowInteractive shadow-interactive Adds hover and focus-within states using an elevation transition from shadow (see above) to shadowInteractive. "active" | "hover" | "stacked" | "sticky" undefined
size size The size prop effects the card padding only. "sm" undefined