• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • 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
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • 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
(external link)

ld-card #

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

Additionally, there is the ld-card-stack component, which allows you to display multiple ld-cards in a stack.

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>
<LdCard>
  <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
</LdCard>
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>

<ld-card size="zero">
  <img
    style="border-radius: inherit"
    src="https://picsum.photos/id/152/180/80"
    alt=""
  />
</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>

<div class="ld-card ld-card--zero">
  <img
    style="border-radius: inherit"
    src="https://picsum.photos/id/152/180/80"
    alt=""
  />
</div>
<LdCard>
  <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
</LdCard>

<LdCard size="sm">
  <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
</LdCard>

<LdCard size="zero">
  <img
    style={ {
      borderRadius: 'inherit'
    } }
    src="https://picsum.photos/id/152/180/80"
    alt=""
  />
</LdCard>
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>
<LdCard>
  <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
</LdCard>

<LdCard shadow="active">
  <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
</LdCard>

<LdCard shadow="hover">
  <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
</LdCard>

<LdCard shadow="sticky">
  <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
</LdCard>
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>
<LdCard shadowInteractive="sticky">
  <LdTypo style={ { marginBottom: '1rem' } }>
    Lorem ipsum dolor sit amet.
  </LdTypo>
  <LdButton mode="highlight">Click me</LdButton>
</LdCard>

<LdCard shadow="sticky" shadowInteractive="stacked">
  <LdTypo style={ { marginBottom: '1rem' } }>
    Lorem ipsum dolor sit amet.
  </LdTypo>
  <LdButton mode="highlight">Click me</LdButton>
</LdCard>
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" | "zero" undefined

Built with StencilJS