stackable bio or biography list with portrait image title and text

stackable bio or biography list with portrait image title and text Demo

View Demo Full Screen View Demo New Tab

stackable bio or biography list with portrait image title and text Code

HTML

<div class='bio-section-wrap'>

  <div class='bio-item'>
    <div class="grid-x grid-padding-x grid-margin-x">
      <div class="large-2 cell">
        <div class="bio-image">
          <img src="https://unsplash.it/140/140">
        </div>
      </div>
      <div class="large-9 cell">
        <div class="bio-title">
          Lorem ipsum dolor
        </div>
        <div class="bio-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi.
        </div>
      </div>
    </div>
  </div>

  <div class='bio-item'>
    <div class="grid-x grid-padding-x grid-margin-x">
      <div class="large-2 cell">
        <div class="bio-image">
          <img src="https://unsplash.it/140/140">
        </div>
      </div>
      <div class="large-9 cell">
        <div class="bio-title">
          Lorem ipsum dolor
        </div>
        <div class="bio-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi.
        </div>
      </div>
    </div>
  </div>

  <div class='bio-item'>
    <div class="grid-x grid-padding-x grid-margin-x">
      <div class="large-2 cell">
        <div class="bio-image">
          <img src="https://unsplash.it/140/140">
        </div>
      </div>
      <div class="large-9 cell">
        <div class="bio-title">
          Lorem ipsum dolor
        </div>
        <div class="bio-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi.
        </div>
      </div>
    </div>
  </div>




</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
.bio-section-wrap {}
.bio-item {
  margin-bottom:20px;
  padding-bottom:20px;
}
.bio-image img {
  display:block;
}
.bio-image {
  display: flex;
	align-items: center;
	justify-content: center;
  width:100%;
}
.bio-title {
  font-family:"Poppins", sans-serif;
  font-weight:bold;
  font-size:22px;
  margin-bottom:10px;
}
.bio-text {
  font-family:"Open Sans", sans-serif;
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/css/foundation.min.css" />