Primer CSS Layout Медиа-объект

Primer CSS — это бесплатная среда CSS с открытым исходным кодом, созданная с использованием системы дизайна GitHub для обеспечения поддержки широкого спектра веб-сайтов GitHub. Это помогает в создании основы основных элементов стиля, таких как интервалы, компоненты, типографика, цвет и т. д.

В этой статье мы рассмотрим медиа-объект в макете CSS для начинающих. Медиа-объект — это тип контейнера, который состоит из изображений и текстов и состоит из базовых утилит CSS.

Классы медиа-объектов Primer CSS Layout: для создания медиа-объекта в Primer CSS нет специального класса, заданного Primer CSS. Вам нужно скомпилировать разные классы в соответствии с вашими потребностями.

Синтаксис:

<div class="clearfix p-3 border">
    <div class="float-left p-3 mr-3 color-bg-subtle">
        ...
    </div>
    <div class="overflow-hidden">
        <p>...</p>
    </div>
</div>

Пример 1: Пример ниже демонстрирует контейнер медиа-объекта.

Выход:

Пример 2. Пример ниже демонстрирует двусторонний контейнер медиаобъектов с гибким центром.

Выход:

Ссылка: https://primer.style/css/utilities/layout#the-media-object