Posted in sections
5
1:13 am, October 1, 2021

stackable bio or biography list with portrait image title and text

a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout. 

As its in foundation here is a sample

or you can see the animated responsive version here

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" />

View Statistics
This Week
68
This Month
404
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
When I realized that, no individual step is hard in any process. Building this airport I'm standing in right now started with a guy writing the architectural plans on paper. That's not hard for him to do. Then laying the first beam isn't had. The whole thing is really hard. So, just take each step kind of piece by piece and when I was able to do that and stop trying to chase this prize and started putting in the work, things just started coming together.
Unknown