Card

Cards are surfaces that display content and actions on a single topic.
They should be easy to scan for relevant and actionable information.

Header image and button link are optionally, thus you can use the card without one of them.
But, if you are planning to use a card without image and without button, consider to use the box component

In some occasions, we may need cards with changes that go further than a simple variant. So, in order to avoid modifying too much the card, "special cards" come handy. For example, the "card excursion" at the bottom of this document.

You can use the card with the flow button

You can use the card with the neutral button

Or even the flat button.

The card can also have a label

The top title is used to make the title more visible and give more content to the card content.
Usually is used without a button

However, we need to make sure that even if a button is added, the title looks still fine.

Without the image, the title has a solid background.

Card component can also be "labeled" with a collection:

The "card price" is a type of card with enough differences from the original card to be considered as "special". Here is used to show the user an overview of the excursions available for an specific acco:

the same card with price but with a compact view

The "card collection" is a type of card with enough differences from the original card to be considered as "special". Here is used to show the user the usp of every collection and two links, one to give access to more info about the collection and the other to show vacations of that collection.

The "card avatar" is a type of card with enough differences from the original card to be considered as "special". Here is used to show an avatar next to the title.