Card (карточка)

Карточки содержат контент и действия, относящиеся к одной теме.

Карточки - это поверхности, которые отображают контент и действия относящиеся к одной теме / объекту.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Простая Карточка

Несмотря на то, что на карточках можно располагать несколько действий, элементы управления и выпадающие меню, будьте сдержаны и помните, что карточки - это входные точки для более сложной и детальной информации.

Outlined Card

Set variant="outlined" to render an outlined card.

Сложное взаимодействие

В варианте для десктопа контент карточки может расширяться. (Click the downward chevron to view the recipe.)

Медиа

Пример карточки, использующей изображение, дополняющее контент.

По умолчанию мы используем комбинацию <div> элемента и background image для отображения медиа. Это может быть проблематично в некоторых ситуациях. Например, вам может понадобиться отобразить видео или адаптивное изображение. Используйте свойство component для этих случаев:

⚠️ When component="img", CardMedia relies on object-fit for centering the image. Не поддерживается в IE11.

Primary action

Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a CardActionArea component.

A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap.

Элементы управления

Все доступные в пределах карточки дополнительные действия следует явно изображать с помощью иконок, текста и других элементов управления, обычно размещаемых в нижней части карточки.

Вот пример карточки с элементами управления мультимедиа.

Кастомизация

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

API

• <Card />
• <CardActionArea />
• <CardActions />
• <CardContent />
• <CardHeader />
• <CardMedia />
• <Collapse />
• <Paper />