Media object
Combinación habitual de imagen y texto a modo de ficha, que recibe habitualmente el nombre de media object.
Contenido
Media object básico
El media object se engloba en la clase .media y el cuerpo de texto en la clase .media__body. La imagen puede llevar la clase .media__left o la clase .media__right en función de su ubicación.
Media object básico
Lorem ipsum dolor
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="media">
<div class="media__left">
<img src="" data-src="holder.js/80x80" alt="Ejemplo de imagen de 80x80" class="img--thumbnail">
</div>
<div class="media__body">
<p class="h6">Lorem ipsum dolor</p>
<p></p>
</div>
</div>
<div class="media">
<div class="media__body">
<p class="h6">Lorem ipsum dolor</p>
<p></p>
</div>
<div class="media__right">
<img src="" data-src="holder.js/80x80" alt="Ejemplo de imagen de 80x80" class="img--thumbnail">
</div>
</div>
Alineación vertical
El media object también cuenta con dos clases modificadoras para la alineación vertical de las imágenes: .media--middle (centrado vertical) y .media--bottom (centrado inferior).
Alineación vertical del media object
Lorem ipsum dolor
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="media">
<div class="media__left">
<img src="" data-src="holder.js/80x80" alt="Ejemplo de imagen de 80x80"" class="img--thumbnail">
</div>
<div class="media__body">
<p class="h6">Lorem ipsum dolor</p>
<p></p>
</div>
</div>
<div class="media">
<div class="media__left media--middle">
<img src="" data-src="holder.js/80x80" alt="Ejemplo de imagen de 80x80"" class="img--thumbnail">
</div>
<div class="media__body">
<p class="h6">Lorem ipsum dolor</p>
<p></p>
</div>
</div>
<div class="media">
<div class="media__left media--bottom">
<img src="" data-src="holder.js/80x80" alt="Ejemplo de imagen de 80x80"" class="img--thumbnail">
</div>
<div class="media__body">
<p class="h6">Lorem ipsum dolor</p>
<p></p>
</div>
</div>