Media Object

flag German flag Spanish flag French flag English

Simple

pic1

Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

<!-- Simple -->
<div class="media">
    <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
    </div>
</div>

Order

Heading

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

pic1 
<!-- Order -->
<div class="media">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">
            Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.
        </p>
    </div>
    <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic1">
</div>

Top-aligned media

pic1

Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula.

<!-- Top Aligned Media -->
<div class="media">
    <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text"> Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula.</p>
    </div>
</div>

Center-aligned media

pic1

Heading

Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

<!-- Center Aligned Media -->
<div class="media">
    <img class="align-self-center rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
    </div>
</div>

Bottom-aligned media

pic1

Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Fusce condimentum cursus mauris et ornare.

<!-- Bottom Aligned Media -->
<div class="media">
    <img class="align-self-end rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Pellentesque pellentesque sed magna vitae porttitor. Integer quis urna eget ligula commodo venenatis in et ligula. Integer eget lorem sodales, sodales dui vel, mattis erat. Fusce condimentum cursus mauris et ornare.</p>
    </div>
</div>

Right Aligned

Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

pic1 
<!-- Right Aligned -->
<div class="media">
    <div class="media-body text-right">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
    </div>
    <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic1">
</div>

Media list

  • pic1

    Heading

    Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

  • pic1

    Heading

    Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

  • pic1

    Heading

    Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

<!-- Media List -->
<ul class="list-unstyled">
    <li class="media">
        <img class="rounded" src="assets/img/profile-3.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>
        </div>
    </li>
    <li class="media">
        <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
        </div>
    </li>
    <li class="media">
        <img class="rounded" src="assets/img/profile-5.jpeg" alt="pic1">
        <div class="media-body">
            <h4 class="media-heading">Heading</h4>
            <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
        </div>
    </li>
</ul>

Nesting

pic1

Heading

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

pic2

Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

<!-- Nesting -->
<div class="media">
    <img class="meta-usr-img rounded" src="assets/img/profile-3.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>

        <div class="media">
            <a class="meta-usr-img" href="javascript:void(0);">
                <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic2">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Heading</h4>
                <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
            </div>
        </div>
    </div>
</div>

Notation Text

pic1

Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

Reply Edit Delete 
<!-- Notation Text -->
<div class="media">
    <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
        <div class="media-notation">
            <a href="javascript:void(0);" class=""> Reply </a>
            <a href="javascript:void(0);" class=""> Edit </a>
            <a href="javascript:void(0);" class=""> Delete </a>
        </div>
    </div>
</div>

Notation Text with Icon

pic1

Heading

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

Reply Edit Delete 
<!-- Notation Text with Icon -->
<div class="media">
    <img class=" rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading">Heading</h4>
        <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>
        <div class="media-notation">
            <a href="javascript:void(0);" class=""><svg> ... </svg> Reply </a>
            <a href="javascript:void(0);" class=""><svg> ... </svg> Edit </a>
            <a href="javascript:void(0);" class=""><svg> ... </svg> Delete </a>
        </div>
    </div>
</div>

Badge

pic1

HeadingWeb Designer

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

<!-- Badge -->
<div class="media">
    <img class="rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading"><span class="media-title"> Heading</span><span class="badge badge-primary">Web Designer</span></h4>
        <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>
    </div>
</div>

Dropdown List

pic1
Heading
Start chat Make a call Statistics

Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.

<!-- Dropdown List -->
<div class="media">
    <img class=" rounded" src="assets/img/profile-4.jpeg" alt="pic1">
    <div class="media-body">
        <h4 class="media-heading"><span class="media-title"> Heading</span>
            <span class="dropdown-list dropdown">
            <i role="menu" class="flaticon-dot-three sr-only" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">sdfdsf</i>
            <svg> ... </svg>

            <span class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                <a class="dropdown-item" href="javascript:void(0);"><span>Start chat</span> <svg> ... </svg></a>
                <a class="dropdown-item" href="javascript:void(0);"><span>Make a call</span> <svg> ... </svg></a>
                <span class="dropdown-divider"></span>
                    <a class="dropdown-item" href="javascript:void(0);"><span>Statistics</span> <svg> ... </svg></a>
                </span>
            </span>
        </h4>
        <p class="media-text">Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus.</p>
    </div>
</div>

Labels

Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

<!-- Label -->
<div class="media">
    <svg> ... </svg>
    <div class="media-body">
        <h4 class="media-heading"><span class="media-title"> Heading</span>
        </h4>
        <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
    </div>
</div>

<div class="media">
    <svg> ... </svg>
    <div class="media-body mb-2">
        <h4 class="media-heading"><span class="media-title"> Heading</span>
        </h4>
        <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
    </div>
</div>

Checkbox

Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

<!-- Checkbox -->
<div class="media">
    <div class="n-chk">
        <label class="new-control new-checkbox checkbox-dark" style="height: 18px;">
            <input type="checkbox" class="new-control-input">
            <span class="new-control-indicator"></span>
        </label>
    </div>

    <div class="media-body">
        <h4 class="media-heading"><span class="media-title"> Heading</span>
        </h4>
        <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
    </div>
</div>

<div class="media">
    <div class="n-chk">
        <label class="new-control new-checkbox checkbox-dark" style="height: 18px;">
            <input type="checkbox" class="new-control-input" checked>
            <span class="new-control-indicator"></span>
        </label>
    </div>

    <div class="media-body">
        <h4 class="media-heading"><span class="media-title"> Heading</span>
        </h4>
        <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
    </div>
</div>

Radio

Heading

Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.

Heading

Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.

<!-- Radio -->
<div class="media">
    <div class="n-chk">
        <label class="new-control new-radio radio-classic-dark" style="height: 18px;">
            <input type="radio" class="new-control-input" name="custom-radio-1">
            <span class="new-control-indicator"></span>
        </label>
    </div>

    <div class="media-body">
        <h4 class="media-heading"><span class="media-title"> Heading</span>
        </h4>
        <p class="media-text">Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra. Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque.</p>
    </div>
</div>

<div class="media">
    <div class="n-chk">
        <label class="new-control new-radio radio-classic-dark" style="height: 18px;">
            <input type="radio" class="new-control-input" name="custom-radio-1" checked>
            <span class="new-control-indicator"></span>
        </label>
    </div>

    <div class="media-body">
        <h4 class="media-heading"><span class="media-title"> Heading</span>
        </h4>
        <p class="media-text">Aenean dignissim sed ante eget dapibus. Sed dapibus nulla elementum, rutrum neque eu, gravida neque. Fusce condimentum cursus mauris et ornare. Mauris fermentum mi id sollicitudin viverra.</p>
    </div>
</div>

© 2021 DesignReset

Coded with

admin-profile
Alan Green

Lead Developer

My Profile

Inbox
Todo

11 New Task
Messages
Andy King

Work is delayed
Alma Clark

It was a bit dramatic.
Vincent

Coffee?
Iris Hofman

Not comming to office today.
Linda Nelson

Uploaded files to server.
New Invoice

#002658 is generated for Laurie Fox

#0036489 is generated for Ernest Reeves

#014778 is generated for Sean Freeman

#0165987 is generated for Nia Hillyer

#0265998 is generated for Dale Butler

Task Board

Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark

New Task is added by Ernest Reeves

Dinner with Kelly Young has been moved to Completed Board by Dale Butler

Event Notifications
View All Mark as Read

New Event has been added on 15 Dec 2020

Collect documents from Kelly at the restaurant tommorrow.

Meeting Event on 12 Nov has been updated to 8 PM

New Event Seminar organised by Design Reset will be held on 25 January

Today's Conference is Cancelled.

Meeting with Project Lead on 01 Jan has been updated to 15 Jan