Card

Components

Card / Product / Light
Tagline

Heading

Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart
Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart
Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart
Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart
Card / Product / Dark
Tagline

Heading

Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart
Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart
Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart
Perfume
Product name

Ingredient - Ingredient

$ 80

Add to Cart
add_shopping_cart

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

Cards are a flexible component used to display content and actions in a variety of contexts. They are generally restricted to a single topic and it should be easy for users to scan relevant and actionable information.

Video tutorials

Coming soon...