Design Guide – v. 8.0.1

Media object

Use media objects to showcase basic user information with text and a small image element or an icon.

Overview

Use the .media class on an object to style it as a small container that feature a left- or right-aligned image/icon alongside textual content.

Bob Corlsan

bob.corlsan@swedbankpay.com

Bob Corlsan

bob.corlsan@swedbankpay.com

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="media">
    <div class="media-img">
        <img src="https://via.placeholder.com/48x48" />
    </div>
    <div class="media-body">
        <h3>Bob Corlsan</h3>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>
<div class="media">
    <div class="media-img">
        <i class="material-icons" aria-hidden="true">account_circle</i>
    </div>
    <div class="media-body">
        <h3>Bob Corlsan</h3>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>

Sizes

Use .media-sm or .media-lg to modify the size of your media objects.

Small

Bob Corlsan

bob.corlsan@swedbankpay.com

Bob Corlsan

bob.corlsan@swedbankpay.com

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="media media-sm">
    <div class="media-img">
        <img src="https://via.placeholder.com/40x40" />
    </div>
    <div class="media-body">
        <h4>Bob Corlsan</h4>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>
<div class="media media-sm">
    <div class="media-img">
        <i class="material-icons" aria-hidden="true">account_circle</i>
    </div>
    <div class="media-body">
        <h4>Bob Corlsan</h4>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>

Large

Bob Corlsan

bob.corlsan@swedbankpay.com

Bob Corlsan

bob.corlsan@swedbankpay.com

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="media media-lg">
    <div class="media-img">
        <img src="https://via.placeholder.com/56x56" />
    </div>
    <div class="media-body">
        <h2>Bob Corlsan</h2>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>
<div class="media media-lg">
    <div class="media-img">
        <i class="material-icons" aria-hidden="true">account_circle</i>
    </div>
    <div class="media-body">
        <h2>Bob Corlsan</h2>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>

Media position

Use the .media-right class to align the media content to the right.

Bob Corlsan

bob.corlsan@swedbankpay.com

Bob Corlsan

bob.corlsan@swedbankpay.com

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="media media-right">
    <div class="media-img">
        <img src="https://via.placeholder.com/48x48" />
    </div>
    <div class="media-body">
        <h3>Bob Corlsan</h3>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>
<div class="media media-right">
    <div class="media-img">
        <i class="material-icons" aria-hidden="true">account_circle</i>
    </div>
    <div class="media-body">
        <h3>Bob Corlsan</h3>
        <p>bob.corlsan@swedbankpay.com</p>
    </div>
</div>