FigMayo Logo

LIBRARIES

🎨 Foundations

core

Fills & Effects
Ctrl-K
🐙 Organisms/Card
Updated 22 November 2024
Card

Card elements contain more complex UI and may have actions within them. They can also act as a single `CTA`.

library-card(8 variants)
View Figma

These cards are used in the larder when users add a library. There are many different states to consider here.

    PlaygroundFigmaStorybook
Figma notes
The info button links to our "how to" page on the .com site. The email state will trigger after 10 minutes of loading. The contact is on the error state will open the Hubspot modal.
component-tile(2 variants)
View Figma

These are the component cards on the library dashboard page.

view-swatch(7 variants)
View Figma

Here is some documentation about this component

site-card(2 variants)
View Figma

Here is some documentation about this component

pricing-card(10 variants)
View Figma

These pricing cards exist on the plans page. They have a selected and default states and contain both the yearly and monthly pricing options.

style-card(8 variants)
View Figma

Style cards are snowflake components that should only be used on the cover page of the documentation site.