- Components
- Media Object
Simple
Code
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="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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
CodeHeading
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.
<!-- order -->
<div class="flex">
<div class="flex-1 ltr:mr-4 rtl:ml-4">
<h4 class="font-semibold text-lg mb-2 text-primary">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>
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
</div>
Top-aligned media
Code
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. 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.
<!-- top-aligned media -->
<div class="flex items-start">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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. 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>
Center-aligned media
Code
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. 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.
<!-- center aligned media -->
<div class="flex items-center">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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. 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>
Bottom-aligned media
Code
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. 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.
<!-- bottom aligned media -->
<div class="flex items-end">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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. 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>
Right Aligned
CodeHeading
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. 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.
<!-- right aligned -->
<div class="flex">
<div class="flex-1 ltr:mr-4 rtl:ml-4 ltr:text-right rtl:text-left">
<h4 class="font-semibold text-lg mb-2 text-primary">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. 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>
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-16 h-16 rounded" />
</div>
</div>
Media list
Code
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
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
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.
<!-- list -->
<div class="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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>
<div class="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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>
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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>
Nesting
Code
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
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.
<!-- nesting -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text mb-5"> 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="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">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>
</div>
</div>
Notation Text
Code
<!-- notation text -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text mb-4"> 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>
<ul class="flex space-x-4 rtl:space-x-reverse font-bold">
<li><a href="javascript:;" class="hover:text-primary">Reply</a></li>
<li><a href="javascript:;" class="hover:text-primary">Edit</a></li>
<li><a href="javascript:;" class="hover:text-primary">Delete</a></li>
</ul>
</div>
</div>
Notation Icon
Code
<!-- notation icon -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading</h4>
<p class="media-text mb-4"> 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>
<ul class="flex space-x-4 rtl:space-x-reverse font-bold">
<li><a href="javascript:;" class="flex items-center hover:text-primary">
<svg> ... </svg> Reply
</a>
</li>
<li><a href="javascript:;" class="flex items-center hover:text-primary">
<svg> ... </svg> Edit
</a>
</li>
<li><a href="javascript:;" class="flex items-center hover:text-primary">
<svg> ... </svg> Delete
</a>
</li>
</ul>
</div>
</div>
Badge
Code
Heading Web Designer
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.
<!-- badge -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg mb-2 text-primary">Heading <span class="badge bg-primary ltr:float-right rtl:float-left">Web Designer</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>
Dropdown List
Code
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.
<!-- dropdown -->
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<img src="/assets/images/profile-5.jpeg" alt="image" class="w-14 h-14 rounded" />
</div>
<div class="flex-1">
<div class="flex justify-between mb-2">
<h4 class="font-semibold text-lg text-primary">Heading </h4>
<div class="relative">
<a href="javascript:;" @click="toggle">
<svg> ... </svg>
</a>
<ul x-cloak x-show="open" x-transition x-transition.duration.300ms class="ltr:right-0 rtl:left-0 top-full">
<li><a href="javascript:;">
<svg> ... </svg> Start chat</a></li>
<li><a href="javascript:;">
<svg> ... </svg> Make a call</a></li>
<li><a href="javascript:;">
<svg> ... </svg> Statistics</a></li>
</ul>
</div>
</div>
<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>
Labels
CodeHeading
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
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.
<!-- error -->
<div class="flex items-center mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<svg> ... </svg>
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">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>
<!-- warning -->
<div class="flex items-center">
<div class="ltr:mr-4 rtl:ml-4">
<svg> ... </svg>
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">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>
Checkbox
CodeHeading
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
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="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<input type="checkbox" class="form-checkbox mt-1.5" checked />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">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>
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<input type="checkbox" class="form-checkbox mt-1.5" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">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>
Radio
CodeHeading
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
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.
<!-- radio -->
<div class="flex mb-5">
<div class="ltr:mr-4 rtl:ml-4">
<input type="radio" class="form-radio mt-1.5" name="radio" checked />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">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>
<div class="flex">
<div class="ltr:mr-4 rtl:ml-4">
<input type="radio" class="form-radio mt-1.5" name="radio" />
</div>
<div class="flex-1">
<h4 class="font-semibold text-lg text-primary">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>