Version 0.40.0

UI Molecules

Media Object

Base example

Media title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

<div class="sui-m-media-object">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Media title</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

With label

Media label

Media title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

<div class="sui-m-media-object">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <div class="sui-a-badge as--text as--lg">Media label</div>
        <h4 class="sui-h-m-none">Media title</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

Media alignment

This modifiers can use a responsive suffix.

Media top aligned (default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Media center aligned

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Media bottom aligned

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

<div class="sui-m-media-object as--top">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Media top aligned (default)</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--middle">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Media center aligned</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--bottom">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Media bottom aligned</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

Gutter between media and content

This modifiers can use a responsive suffix.

Gutter none

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Gutter xxs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Gutter xs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Gutter sm

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Gutter md (default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Gutter lg

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Gutter xl

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

Gutter xxl

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

<div class="sui-m-media-object as--gutter-none">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter none</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--gutter-xxs">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter xxs</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--gutter-xs">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter xs</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--gutter-sm">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter sm</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--gutter-md">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter md (default)</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--gutter-lg">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter lg</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--gutter-xl">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter xl</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

<div class="sui-m-media-object as--gutter-xxl">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <h4 class="sui-h-m-none">Gutter xxl</h4>
        <p>
            Lorem ipsum ...
        </p>
    </div>
</div>

Example with buttons

Media label

Media title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at corporis culpa cum dicta, excepturi facilis.

<div class="sui-m-media-object">
    <div class="sui-m-media-object__media">
        <div class="sui-a-thumbnail as--init-loader">
            <img src="..." alt="">
        </div>
    </div>
    <div class="sui-m-media-object__content">
        <div class="sui-a-badge as--text as--lg">Media label</div>
        <h4 class="sui-h-m-none">Media title</h4>
        <p>
            Lorem ipsum ...
        </p>
        <div class="sui-g-grid as--auto">
            <div class="sui-g-grid__item">
                <button class="sui-a-button as--secondary">
                    Secondary
                </button>
            </div>
            <div class="sui-g-grid__item">
                <button class="sui-a-button as--primary">
                    Primary
                </button>
            </div>
        </div>
    </div>
</div>