Карточки: тег article

Карточка — блок с рамкой или тенью, который объединяет связанное содержимое: анонс записи, проект в портфолио, тариф. В Pico карточка — это обычный <article>, тот самый тег для самостоятельного фрагмента страницы из учебника. Классов не нужно.

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<article>
  Свойство gap работает и во flexbox, и в grid — отступы между элементами больше не нужно задавать через margin.
</article>

В превью текст лежит на светлом блоке с тенью и скруглёнными углами. Pico даёт <article> внутренние отступы и отступ снизу, так что несколько карточек подряд не слипаются.

Шапка и подвал

<header> и <footer> внутри <article> становятся полосами сверху и снизу карточки с другим фоном и разделительной линией:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<article>
  <header>
    <hgroup>
      <h3>Сетка без медиазапросов</h3>
      <p>12 марта</p>
    </hgroup>
  </header>
  <p>Как auto-fit и minmax подбирают число колонок под ширину экрана.</p>
  <footer>
    <a href="#">Читать дальше</a>
  </footer>
</article>

Заголовок с датой и ссылка внизу отделены от текста полосами чуть другого цвета. Это готовый анонс записи для главной страницы блога.

Сетка карточек

Карточки удобно ставить в grid из урока о каркасе. Картинке внутри карточки задайте ширину 100%, чтобы она заняла всю ширину карточки:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<div class="grid">
  <article>
    <img src="/media/photo-400x250.jpg" alt="Сайт кофейни на экране ноутбука" style="width: 100%">
    <h4>Сайт кофейни</h4>
    <p>Меню, карта и форма брони столика.</p>
  </article>
  <article>
    <img src="/media/photo-400x250.jpg" alt="Галерея фотографа" style="width: 100%">
    <h4>Портфолио фотографа</h4>
    <p>Галерея с фильтрами по жанрам.</p>
  </article>
</div>

Две карточки проектов с картинкой, заголовком и описанием стоят рядом на широком экране и друг под другом на узком. В настоящем проекте правило article img с шириной 100% лучше вынести в свой CSS-файл.

Частая ошибка

Заменить <article> на <div class="card"> по привычке из Bootstrap. В Pico нет класса card, и блок останется без фона и тени. Даже если нужен только вид карточки, берите <article> — или допишите свой класс со стилями.