Перейти к контенту

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.

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

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

⚠️ Missing demo `pages/components/cards/SimpleCard.js` ⚠️

Outlined Card

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

Word of the Day

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

<Card variant="outlined">{card}</Card>

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

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

R
Shrimp and Chorizo PaellaSeptember 14, 2016

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.

Медиа

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

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

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

Contemplative Reptile
Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

⚠️ 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.

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

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

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

Live From Space
Mac Miller

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

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