- کامپوننت ها
- Media Object
Simple
کد
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کدسرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کد
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد. سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کد
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد. سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کد
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد. سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کدسرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد. سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کد
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کد
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد. سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کد
<!-- 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
کد
<!-- 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
کد
Heading Web Designer
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کد
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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
کدسرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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 -->
<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
کدسرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
سرفصل
سس را روی سس بریزید و تزیین کنید. اشتیاق مادرم به این دغدغه کارتون بود. اما ابتدا به پروتئین نیاز دارد. اما هیچ عنصر پروتئین، آرایش، فوتبال، بارداری وجود ندارد.
<!-- 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>
© . تمام حقوق مادی و معنوی محفوظ است.