Media
Media objects provide you with a flexible component that can be easily nested and repeated, such as blog comments and tweets.
Media objects are useful for repetitive components that have a media element positioned alongside them, such as an user image or blog post image.
Preview
Component.vue
<template>
<IMedia>
<template #image>
<img
src="../../../assets/images/placeholder-100x100.jpg"
height="80"
width="80"
alt="Media Image"
/>
</template>
<h3 class="_margin:0">Media Title</h3>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et...
</p>
</IMedia>
</template>
<script setup></script>Nesting
Media components can be nested inside one another to create a parent-child relationship between related components.
Preview
Component.vue
<template>
<IMedia>
<template #image>
<img
src="../../../assets/images/placeholder-100x100.jpg"
height="80"
width="80"
alt="Media Image"
/>
</template>
<h3 class="_margin:0">Media Title</h3>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<IMedia>
<template #image>
<img
src="../../../assets/images/placeholder-100x100.jpg"
height="60"
width="60"
alt="Media Image"
/>
</template>
<h3 class="_margin:0">Nested Media Title</h3>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</IMedia>
</IMedia>
</template>
<script setup></script>Alignment
The media element in a media component can be aligned with flexbox helper classes to the top (default), middle, or end of the .media-body content.
Preview
Component.vue
<template>
<IMedia>
<template #image>
<img
class="_align-self:flex-start"
src="../../../assets/images/placeholder-100x100.jpg"
height="80"
width="80"
alt="Media Image"
/>
</template>
<h3 class="_margin:0">Media Title</h3>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</IMedia>
<IMedia>
<template #image>
<img
class="_align-self:center"
src="../../../assets/images/placeholder-100x100.jpg"
height="80"
width="80"
alt="Media Image"
/>
</template>
<h3 class="_margin:0">Media Title</h3>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</IMedia>
<IMedia>
<template #image>
<img
class="_align-self:flex-end"
src="../../../assets/images/placeholder-100x100.jpg"
height="80"
width="80"
alt="Media Image"
/>
</template>
<h3 class="_margin:0">Media Title</h3>
<p class="_margin:0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</IMedia>
</template>
<script setup></script>