Карточки

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

Использование

Компонент карточки написан на чистом CSS, для его работы достаточно написать HTML-код.

Связанное чтение

Стиль

Полная HTML-структура

Ниже приведена полная HTML-структура карточки, включая элементы со всеми предопределенными стилями.

Пример

<div class="mdui-card">

  <!-- Заголовок карточки, содержит аватар, заголовок и подзаголовок -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- Медиа-контент карточки, может содержать изображения, видео и другой медиа-контент, а также заголовок и подзаголовок -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- Карточка может содержать одну или несколько кнопок меню -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
        <i class="mdui-icon material-icons">share</i>
      </button>
    </div>
  </div>

  <!-- Заголовок и подзаголовок карточки -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- Содержимое карточки -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- Кнопки карточки -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right">
      <i class="mdui-icon material-icons">expand_more</i>
    </button>
  </div>

</div>

Наложение на медиа-элемент

Добавьте <div class="mdui-card-media-covered"></div> внутрь <div class="mdui-card-media"></div> и поместите контент, который должен перекрывать медиа-элемент, в этот элемент.

Пример

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Пример

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

Добавьте класс .mdui-card-media-covered-top к .mdui-card-media-covered, чтобы слой перекрытия располагался в верхней части медиа-элемента.

Пример

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Добавьте класс .mdui-card-media-covered-transparent к .mdui-card-media-covered, чтобы слой перекрытия имел прозрачный фон.

Пример

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Добавьте класс .mdui-card-media-covered-gradient к .mdui-card-media-covered, чтобы слой перекрытия имел градиентный фон.

Пример

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Вертикальное расположение кнопок

Добавление класса .mdui-card-actions-stacked к <div class="mdui-card-actions"></div> позволяет расположить кнопки вертикально.

Пример

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Список CSS-классов

Имя класса	Описание
`.mdui-card`	Определяет компонент карточки.
`.mdui-card-header`	Определяет заголовок карточки.
`.mdui-card-header-avatar`	Определяет аватар в заголовке карточки.
`.mdui-card-header-title`	Определяет заголовок в верхней части карточки.
`.mdui-card-header-subtitle`	Определяет подзаголовок в верхней части карточки.
`.mdui-card-media`	Определяет медиа-элемент в карточке.
`.mdui-card-media-covered`	Определяет содержимое, накладываемое на медиа-элемент.
`.mdui-card-media-covered-top`	Располагает слой перекрытия в верхней части медиа-элемента.
`.mdui-card-media-covered-transparent`	Делает фон слоя перекрытия прозрачным.
`.mdui-card-media-covered-gradient`	Делает фон слоя перекрытия градиентным.
`.mdui-card-menu`	Определяет меню в правом верхнем углу карточки.
`.mdui-card-primary`	Определяет область заголовка и подзаголовка карточки.
`.mdui-card-primary-title`	Определяет заголовок карточки.
`.mdui-card-primary-subtitle`	Определяет подзаголовок карточки.
`.mdui-card-content`	Определяет содержимое карточки.
`.mdui-card-actions`	Определяет панель действий карточки.
`.mdui-card-actions-stacked`	Располагает панель действий вертикально.

Нижняя навигация

Чипы