Working with the card component

Discover how to utilize the shadcn/ui card component in Figma and effectively use its slots.

Instructions

  1. Open the card page and click on the main card component.
  2. Duplicate the instance by holding the option key and dragging it to an empty space on the canvas.
  3. With the instance selected, use the component properties panel to edit its content.
  4. If the card header is not needed, disable it, or replace it with your title and description.
  5. Use slot components to add your content below. Change the swap content to card/example content.
  6. Double-click the card to change the content inside.
  7. Replace login inputs with text and set the height to hug, allowing the card to adapt to the content. Add your content or use the provided example content.
  8. To add your component to the card content, first create a component for your custom content with proper constraints.
  9. Change the swap content to your component.
  10. Disable the card footer if it's not needed, or replace it with your content.
Up next
Pricing card component
This lesson covers the creation of a more complex and fully responsive Pricing Card component using shadcn/ui styles.