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.
Простая Карточка
Несмотря на то, что на карточках можно располагать несколько действий, элементы управления и выпадающие меню, будьте сдержаны и помните, что карточки - это входные точки для более сложной и детальной информации.
Word of the Day
adjective
well meaning and kindly.
"a benevolent smile"
Word of the Day
adjective
well meaning and kindly.
"a benevolent smile"
Сложное взаимодействие
В варианте для десктопа контент карточки может расширяться. (Click the downward chevron to view the recipe.)
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.
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
По умолчанию мы используем комбинацию <div> элемента и background image для отображения медиа. Это может быть проблематично в некоторых ситуациях. Например, вам может понадобиться отобразить видео или адаптивное изображение. Используйте свойство component для этих случаев:
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
⚠️ When
component="img", CardMedia relies onobject-fitfor 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.