Media

Used to construct highly repetitive components like news and event lists, blog comments, tweets, and the like.

Media Object

ready 
<div class="ds-block">

    <div class="ds-media-item">
        <header class="ds-media-item__header">
            <img class="ds-media-item__img" src="https://via.placeholder.com/100" alt="">
        </header>

        <div class="ds-media-item__body">
            <h3><a href="#">Heading</a></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

</div>

Media list

ready

Media objects can also be list items within a media list

<div class="ds-block">

    <ul class="ds-media-list">
        <li class="ds-media-item">
            <header class="ds-media-item__header">
                <img class="ds-media-item__img" src="https://via.placeholder.com/100" alt="">
            </header>

            <div class="ds-media-item__body">
                <h3><a href="#">Heading</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>

        <li class="ds-media-item">
            <header class="ds-media-item__header">
                <img class="ds-media-item__img" src="https://via.placeholder.com/100" alt="">
            </header>

            <div class="ds-media-item__body">
                <h3><a href="#">Heading</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>

        <li class="ds-media-item">
            <header class="ds-media-item__header">
                <img class="ds-media-item__img" src="https://via.placeholder.com/100" alt="">
            </header>

            <div class="ds-media-item__body">
                <h3><a href="#">Heading</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>

        <li class="ds-media-item">
            <header class="ds-media-item__header">
                <img class="ds-media-item__img" src="https://via.placeholder.com/100" alt="">
            </header>

            <div class="ds-media-item__body">
                <h3><a href="#">Heading</a></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>
    </ul>

</div>

Media object - nested

ready

Media objects can be nested.

<div class="ds-block">

    <div class="ds-media-item">
        <header class="ds-media-item__header">
            <img class="ds-media-item__img" src="https://via.placeholder.com/100" alt="">
        </header>

        <div class="ds-media-item__body">
            <h3><a href="#">Heading</a></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <div class="ds-media-item">
                <header class="ds-media-item__header">
                    <img class="ds-media-item__img" src="https://via.placeholder.com/100" alt="">
                </header>
            
                <div class="ds-media-item__body">
                    <h3><a href="#">Heading</a></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>

        </div>
    </div>

</div>