Use the Media layout when you need an image and text next to each other.
.wb-l-media, .wb-l-media__figure, .wb-l-media__body
The media layout helps us place a single image or icon on the left hand side
of a group of text, without the text flowing underneath. Place the image or
icon within .wb-l-media__figure and define the needed width on the
image/icon. The content inside .wb-l-media__body will automatically take
up the remaining space.
If you give a mouse a cookie, he's going to ask for a glass of milk. When you give him the milk, he'll probably ask you for a straw. When he's finished, he'll ask you for a napkin.Then he'll want to look in a mirror to make sure he doesn't have a milk mustache. When he looks in the mirror, he might notice his hair needs a trim. So he'll probably ask for a pair of nail scissors. When he's finished giving himself a trim, he'll want a broom to sweep it up. He'll start sweeping. He might get carried away and sweep every room in the house. He may even end up washing the floors as well! When he's done, he'll probably want to take a nap.
<div class='wb-l-media'>
<div class='wb-l-media__figure'>
<img src='assets/papel/avatar.png' width='100' />
</div>
<div class='wb-l-media__body'>
<p class='wb-text'>
If you give a mouse a cookie, he's going to ask for a glass of milk. When
you give him the milk, he'll probably ask you for a straw. When he's
finished, he'll ask you for a napkin.Then he'll want to look in a mirror to
make sure he doesn't have a milk mustache. When he looks in the mirror, he
might notice his hair needs a trim. So he'll probably ask for a pair of nail
scissors. When he's finished giving himself a trim, he'll want a broom to
sweep it up. He'll start sweeping. He might get carried away and sweep every
room in the house. He may even end up washing the floors as well! When he's
done, he'll probably want to take a nap.
</p>
</div>
</div>.wb-l-media--center
Use .wb-l-media--center to make the object vertically align.
If you give a mouse a cookie, he's going to ask for a glass of milk. When you give him the milk, he'll probably ask you for a straw. When he's finished, he'll ask you for a napkin.Then he'll want to look in a mirror to make sure he doesn't have a milk mustache. When he looks in the mirror, he might notice his hair needs a trim. So he'll probably ask for a pair of nail scissors. When he's finished giving himself a trim, he'll want a broom to sweep it up. He'll start sweeping. He might get carried away and sweep every room in the house. He may even end up washing the floors as well! When he's done, he'll probably want to take a nap.
<div class='wb-l-media wb-l-media--center'>
<div class='wb-l-media__figure'>
<img src='assets/papel/avatar.png' width='100' />
</div>
<div class='wb-l-media__body'>
<p class='wb-text'>
If you give a mouse a cookie, he's going to ask for a glass of milk. When
you give him the milk, he'll probably ask you for a straw. When he's
finished, he'll ask you for a napkin.Then he'll want to look in a mirror to
make sure he doesn't have a milk mustache. When he looks in the mirror, he
might notice his hair needs a trim. So he'll probably ask for a pair of nail
scissors. When he's finished giving himself a trim, he'll want a broom to
sweep it up. He'll start sweeping. He might get carried away and sweep every
room in the house. He may even end up washing the floors as well! When he's
done, he'll probably want to take a nap.
</p>
</div>
</div>.wb-l-media__figure-reverse
To show the figure on the right side of the body,
use .wb-l-media__figure-reverse instead.
If you give a mouse a cookie, he's going to ask for a glass of milk. When you give him the milk, he'll probably ask you for a straw. When he's finished, he'll ask you for a napkin.Then he'll want to look in a mirror to make sure he doesn't have a milk mustache. When he looks in the mirror, he might notice his hair needs a trim. So he'll probably ask for a pair of nail scissors. When he's finished giving himself a trim, he'll want a broom to sweep it up. He'll start sweeping. He might get carried away and sweep every room in the house. He may even end up washing the floors as well! When he's done, he'll probably want to take a nap.
<div class='wb-l-media'>
<div class='wb-l-media__figure-reverse'>
<img src='assets/papel/avatar.png' width='100' />
</div>
<div class='wb-l-media__body'>
<p class='wb-text'>
If you give a mouse a cookie, he's going to ask for a glass of milk. When
you give him the milk, he'll probably ask you for a straw. When he's
finished, he'll ask you for a napkin.Then he'll want to look in a mirror to
make sure he doesn't have a milk mustache. When he looks in the mirror, he
might notice his hair needs a trim. So he'll probably ask for a pair of nail
scissors. When he's finished giving himself a trim, he'll want a broom to
sweep it up. He'll start sweeping. He might get carried away and sweep every
room in the house. He may even end up washing the floors as well! When he's
done, he'll probably want to take a nap.
</p>
</div>
</div>