OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Profile cards

←

Here is one way to display a bunch of user profile cards. The automatic CSS grid has a customized min-size for the cards, so they are flexbile in their width. Inside a Flexbox column pushes the meta-footer to the bottom.

SCSS: _grid-auto.scss _flex.scss _radius.scss _borders.scss _box-shadow.scss
Portrait

Jessica Joe

Bald. Often Unreliable. Easily distracte.

83 Photos
123 Followers
343 Likes
Portrait

Manual Man

A human. Being.

69 Photos
89 Followers
320 Likes
Portrait

Johannes Jan

Born at a very young age.

176 Photos
123 Followers
343 Likes
Portrait

Franky Free

Insert pretentious crap about myself here.

119 Photos
37 Followers
243 Likes
Portrait

Angie Ace

I’m really a giant cupcake. Afraid of roller coasters and dry ice.

117 Photos
102 Followers
282 Likes
Portrait

Judy Jane

I’m not smart. I just wear glasses.

70 Photos
89 Followers
92 Likes 
<div class="docs-profile-container grid-auto gap_s">
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&1" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/1.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Jessica Joe</h3>
        <p class="ma-t_xs">Bald. Often Unreliable. Easily distracte.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">83</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">123</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">343</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&asd" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/2.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Manual Man</h3>
        <p class="ma-t_xs">A human. Being.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">69</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">89</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">320</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&22" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/3.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Johannes Jan</h3>
        <p class="ma-t_xs">Born at a very young age.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">176</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">123</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">343</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&vvv" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/4.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Franky Free</h3>
        <p class="ma-t_xs">Insert pretentious crap about myself here.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">119</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">37</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">243</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&zzzz" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/5.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Angie Ace</h3>
        <p class="ma-t_xs">I’m really a giant cupcake. Afraid of roller coasters and dry ice.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">117</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">102</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">282</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex column bo_px docs-profile ra_s bs_xs">
    <div class="span-auto cover media ar-16-9 ra-t_s tinted-bg-warn">
      <img src="//picsum.photos/300/200/?random&gg" alt="">
    </div>
    <div class="pa-h_m zi-1">
      <div class="text-center ma-b_m">
        <img src="//randomuser.me/api/portraits/lego/6.jpg" alt="Portrait" class="ra-circle ma-t_l- bo_xs">
        <h3 class="text-clip">Judy Jane</h3>
        <p class="ma-t_xs">I’m not smart. I just wear glasses.</p>
      </div>
    </div>
    <div class="span-auto ma-t-auto pa-v_m bg-warn-2 ra-b_s">
      <div class="flex wrap-no">
        <div class="span-third text-center">
          <b class="block">70</b>
          <span class="text_s block">Photos</span>
        </div>
        <div class="span-third text-center">
          <b class="block">89</b>
          <span class="text_s block">Followers</span>
        </div>
        <div class="span-third text-center">
          <b class="block">92</b>
          <span class="text_s block">Likes</span>
        </div>
      </div>
    </div>
  </div>
</div>


<style>
  .docs-profile-container  { --grid-auto-min: 14rem;  }
  .docs-profile img {  width:8rem; }
</style>