• 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. Stack direction
    1. Left-to-right
    2. Right-to-left
    3. Vertical
  3. Properties
Components Card Card Stack
(external link)

ld-card-stack #

Use the ld-card-stack component to display multiple ld-cards in a stack.

A maximum of three cards are displayed in the stack, even if there are more cards in it.

Default #

<ld-card-stack>
  <ld-card>Card A</ld-card>
  <ld-card>Card B</ld-card>
  <ld-card>Card C</ld-card>
  <ld-card>Card D</ld-card>
  <ld-card>Card E</ld-card>
</ld-card-stack>
<ol class="ld-card-stack">
  <li class="ld-card">Card A</li>
  <li class="ld-card">Card B</li>
  <li class="ld-card">Card C</li>
  <li class="ld-card">Card D</li>
  <li class="ld-card">Card E</li>
</ol>
<LdCardStack>
  <LdCard>Card A</LdCard>
  <LdCard>Card B</LdCard>
  <LdCard>Card C</LdCard>
  <LdCard>Card D</LdCard>
  <LdCard>Card E</LdCard>
</LdCardStack>
Card A Card B Card C Card D Card E
  1. Card A
  2. Card B
  3. Card C
  4. Card D
  5. Card E

Stack direction #

Left-to-right #

<ld-card-stack direction="ltr">
  <ld-card>Card A</ld-card>
  <ld-card>Card B</ld-card>
  <ld-card>Card C</ld-card>
  <ld-card>Card D</ld-card>
  <ld-card>Card E</ld-card>
</ld-card-stack>
<ol class="ld-card-stack ld-card-stack--ltr">
  <li class="ld-card">Card A</li>
  <li class="ld-card">Card B</li>
  <li class="ld-card">Card C</li>
  <li class="ld-card">Card D</li>
  <li class="ld-card">Card E</li>
</ol>
<LdCardStack direction="ltr">
  <LdCard>Card A</LdCard>
  <LdCard>Card B</LdCard>
  <LdCard>Card C</LdCard>
  <LdCard>Card D</LdCard>
  <LdCard>Card E</LdCard>
</LdCardStack>
Card A Card B Card C Card D Card E
  1. Card A
  2. Card B
  3. Card C
  4. Card D
  5. Card E

Right-to-left #

<ld-card-stack direction="rtl">
  <ld-card>Card A</ld-card>
  <ld-card>Card B</ld-card>
  <ld-card>Card C</ld-card>
  <ld-card>Card D</ld-card>
  <ld-card>Card E</ld-card>
</ld-card-stack>
<ol class="ld-card-stack ld-card-stack--rtl">
  <li class="ld-card">Card A</li>
  <li class="ld-card">Card B</li>
  <li class="ld-card">Card C</li>
  <li class="ld-card">Card D</li>
  <li class="ld-card">Card E</li>
</ol>
<LdCardStack direction="rtl">
  <LdCard>Card A</LdCard>
  <LdCard>Card B</LdCard>
  <LdCard>Card C</LdCard>
  <LdCard>Card D</LdCard>
  <LdCard>Card E</LdCard>
</LdCardStack>
Card A Card B Card C Card D Card E
  1. Card A
  2. Card B
  3. Card C
  4. Card D
  5. Card E

Vertical #

<ld-card-stack direction="vertical">
  <ld-card>Card A</ld-card>
  <ld-card>Card B</ld-card>
  <ld-card>Card C</ld-card>
  <ld-card>Card D</ld-card>
  <ld-card>Card E</ld-card>
</ld-card-stack>
<ol class="ld-card-stack ld-card-stack--vertical">
  <li class="ld-card">Card A</li>
  <li class="ld-card">Card B</li>
  <li class="ld-card">Card C</li>
  <li class="ld-card">Card D</li>
  <li class="ld-card">Card E</li>
</ol>
<LdCardStack direction="vertical">
  <LdCard>Card A</LdCard>
  <LdCard>Card B</LdCard>
  <LdCard>Card C</LdCard>
  <LdCard>Card D</LdCard>
  <LdCard>Card E</LdCard>
</LdCardStack>
Card A Card B Card C Card D Card E
  1. Card A
  2. Card B
  3. Card C
  4. Card D
  5. Card E

Properties #

Property Attribute Description Type Default
direction direction The stack direction. "ltr" | "rtl" | "vertical" undefined
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined

Built with StencilJS