Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Card

yarn add @clayui/card

Cards are a specific form of data visualization focused mainly on displaying images.

  • Examples
  • Markup
  • API

Stable3.91.0View in LexiconCHANGELOGstorybook demos

  • Composing
    • Horizontal composing
    • Lexicon specs
  • High-level Components
    • CardWithInfo
    • CardWithNavigation
    • CardWithUser
    • CardWithHorizontal

Composing

Card follows the Clay component compositional philosophy, you can compose with ClayCard's low-level components to get Clay results and adapt to your use cases, but if you just follow the specification you can use the high-level ClayCard.

This documentation focuses on how you can use ClayCard low-level components to reach unspecified use cases and how to use ClayCard high-level components.

You can only leverage the body of Card and Card.Body to create the white card and add more elements.

Copied!
Code Sample (expand to see it)

Horizontal composing

You can use the Card in horizontal format and use the autofit utilities to create more possibilities.

Copied!
Code Sample (expand to see it)

Lexicon specs

The low-level components for ClayCard have been built thinking about how you can use the components in the composition to get close to Lexicon specifications.

For some low-level components it is necessary to pass some modifier classes in order for the component to reach the Lexicon result, this was necessary since we did not want to attach the component just for this case and the low-level components could be used more flexibly and allow you to create new possibilities.

Copied!
Code Sample (expand to see it)

High-level Components

ClayCard's high-level components predict the major cases of the Lexicon specification:

  • Cards with Images
  • Card for user listing
  • Card for docs listing
  • Card for folder
  • Card for navigation

CardWithInfo

ClayCardWithInfo you can use to create cards with images and documents.

Copied!
Code Sample (expand to see it)

CardWithNavigation

Copied!
Code Sample (expand to see it)

CardWithUser

Copied!
Code Sample (expand to see it)

CardWithHorizontal

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!