Карточки

Карточка — блок, который объединяет картинку, заголовок, текст и действия об одном объекте. На платформе LearnUp так показывают курсы. Компонент — класс card, а его части размечают содержимое внутри.

Части карточки

Класс	Что это
`card`	Сам компонент — внешний блок
`figure` (тег)	Обёртка для картинки
`card-body`	Внутренний блок с отступами
`card-title`	Заголовок
`card-actions`	Ряд кнопок внизу

Карточка курса

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="card w-80 bg-base-100 shadow-sm">
  <figure>
    <img src="/media/photo-400x250.jpg" alt="Обложка курса">
  </figure>
  <div class="card-body">
    <h2 class="card-title">Основы HTML</h2>
    <p>12 уроков: теги, ссылки, таблицы и формы.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Записаться</button>
    </div>
  </div>
</div>

Под кодом карточка с картинкой во всю ширину, заголовком, описанием и кнопкой справа. Фон и тень у самой card не заданы — их добавляют утилитами bg-base-100 и shadow-sm, а justify-end прижимает кнопку вправо.

Рамка и размер

Вместо тени можно дать рамку модификатором card-border, а размер текста и отступов — модификаторами card-sm, card-lg. В заголовок удобно добавить значок:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="card card-border card-sm w-72 bg-base-100">
  <div class="card-body">
    <h2 class="card-title">
      JavaScript с нуля
      <span class="badge badge-secondary">Новый</span>
    </h2>
    <p>24 урока · $29</p>
  </div>
</div>

Компактная карточка без картинки, с тонкой рамкой и розовым значком «Новый». Значки подробно разобраны в уроке об уведомлениях и значках.

Горизонтальная карточка

Модификатор card-side ставит картинку слева от текста:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="card card-side bg-base-200">
  <figure class="w-32 shrink-0">
    <img src="/media/photo-200x200.jpg" alt="Обложка курса">
  </figure>
  <div class="card-body">
    <h2 class="card-title">Вёрстка на Flexbox</h2>
    <p>Вы прошли 7 из 10 уроков.</p>
  </div>
</div>

Картинка слева, текст справа — так в личном кабинете выглядит список начатых курсов.

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

Расставляют карточки утилитами Tailwind — обычно сеткой:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid gap-4 p-4 sm:grid-cols-2">
  <div class="card bg-base-200">
    <div class="card-body">
      <h2 class="card-title">Основы HTML</h2>
      <p>$19</p>
    </div>
  </div>
  <div class="card bg-base-200">
    <div class="card-body">
      <h2 class="card-title">JavaScript с нуля</h2>
      <p>$29</p>
    </div>
  </div>
</div>

На широком экране карточки стоят в два столбца, на узком — друг под другом.

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

Положить картинку прямо в card-body. Она получит внутренние отступы карточки и не дотянется до краёв, и не получит скруглённых углов карточки. Картинку, которая должна занимать всю ширину, кладите в тег <figure> — прямо внутри card, до card-body.

Спасибо, что читаете!