Material Design Lite. Card

Рассмотрим использование карточек в MDL.

Классы карточек.

mdl-card - элемент div в качестве контейнера карточки. Требуется внешний блок.
mdl-card--border - задаёт границы объектам карточки (внутренние блоки)
mdl-shadow--2dp ... mdl-shadow--16dp - глубина тени (2, 3, 4, 6, 8, or 16)
mdl-card__title - заголовок карточки
mdl-card__title-text - текс карточки. Требуется тег заголовков (H1 - H6) внутри контейнера заголовка
mdl-card__subtitle-text - текст подзаголовка
mdl-card__media - контейнер для медиа
mdl-card__supporting-text - текс-пояснение к медиа
mdl-card__actions - контейнер для действия

Для создания карточки необходимо добавить блок div с классом mdl-card и mdl-shadow—2dp, второй класс добавит тень под карточкой. Размер тени можно увеличить, изменив название второго класса. 2dp можно заменить на набор цифр от 3 до 16.


<div class="mdl-grid">
    <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
    </div>
</div>

Получится пустая карточка.

Теперь необходимо определиться с содержанием карточки. Допустим в карточке содержится картинка, заголовок новости, краткий отрывок новости и стандартная кнопка «Подробнее», которая ведёт на полный текст статьи. Чтобы добавить заголовок, создадим контейнер с классом mdl-card__title.

Внутри этого блока создайте тег заголовка с классом mdl-card__title-text. В зависимости от структуры страницы заголовок может быть от h1 до h6.


<div class="mdl-grid">
    <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Текст в заголовке карточки</h2>
        </div>
    </div>
</div>

Добавим краткий текст статьи. Создадим новый контейнер под заголовком с классом mdl-card__supporting-text. Аннотация поста будет находиться в теге p.


<div class="mdl-grid">
    <div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h1 class="mdl-card__title-text">Текст в заголовке карточки</h1>
        </div>
        <div class="mdl-card__supporting-text">
            <p>Текст в карточке.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
        </div>
    </div>
</div>

Чтобы добавить картинку к новости, над блоком с заголовком необходимо создать тег figure с классом mdl-card__media. У данного элемента по умолчанию есть маленькие отступы, если они мешают, то уберите их:


.mdl-card__media {
    margin: 0;
}

Добавим картинку.


<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
    <figure class="mdl-card__media">
      <img src="image.jpg" alt="" />
    </figure>
    <div class="mdl-card__title">
        <h1 class="mdl-card__title-text">Текст в заголовке карточки</h1>
    </div>
    <div class="mdl-card__supporting-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
    </div>
</div>

По умолчанию в MDL изображение не растягивается при изменении размера карточки, т.е. если увеличить карточку, то изображение останется того же размера. Медиа контейнер, в котором находится изображение, прячет выходящие за его границы части картинки. Чтобы изображение изменялось в размерах вместе с контейнером и сохраняло свои пропорции, необходимо прописать максимальную ширину изображения в 100%.

В карточке нужно подобрать набор действий, которые подходят по тематике контента. Если это твит, то должны быть кнопки Retweet и Follow. У нас это пост в блоге, и нам нужна кнопка «Подробнее», также будут кнопки лайк и поделиться. Все эти кнопки мы добавим под аннотацией к статье в блоке с классом mdl-card__actions.


<div class="mdl-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-shadow--2dp">
    <figure class="mdl-card__media">
        <img src="../../images/css.jpg" alt="" />
    </figure>
    
    <div class="mdl-card__title">
        <h1 class="mdl-card__title-text">Текст в заголовке карточки</h1>
    </div>
    
    <div class="mdl-card__supporting-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.</p>
    </div>
    
    <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Подробнее</a>
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
    </div>
</div>

Посмотреть примеры с карточками

Material Design Lite. Card

Реклама