Working with the card component
Discover how to utilize the shadcn/ui card component in Figma and effectively use its slots.
Instructions
- Open the card page and click on the main card component.
- Duplicate the instance by holding the option key and dragging it to an empty space on the canvas.
- With the instance selected, use the component properties panel to edit its content.
- If the card header is not needed, disable it, or replace it with your title and description.
- Use slot components to add your content below. Change the swap content to card/example content.
- Double-click the card to change the content inside.
- 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.
- To add your component to the card content, first create a component for your custom content with proper constraints.
- Change the swap content to your component.
- 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.