{% import 'components/hljs.html' as hljs %}

<div class="{{ containerClass }}">
  <ol class="breadcrumb m-0">
    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
    <li class="breadcrumb-item">Components</li>
    <li class="breadcrumb-item active">Avatars</li>
  </ol>
</div>

<div class="{{ containerClass }} page-section">
  <h4>Size</h4>
  <div class="card mb-32pt">
    <div class="card-body avatar-list">
      <p class="text-70">Using Bootstrap's typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what's needed.</p>

      <div class="avatar avatar-xxl">
        <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-xl">
        <img src="assets/images/people/256/256_rsz_karl-s-973833-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-lg">
        <img src="assets/images/people/256/256_rsz_florian-perennes-594195-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar">
        <img src="assets/images/people/256/256_rsz_james-gillespie-714755-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-sm">
        <img src="assets/images/people/256/256_rsz_sharina-mae-agellon-377466-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-xs">
        <img src="assets/images/people/256/256_rsz_90-jiang-640827-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
    </div>
    <div class="card-footer">
      {% call hljs.component() -%}
<div class="avatar avatar-xxl">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xl">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-lg">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-sm">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-xs">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>    
      {%- endcall %}
    </div>
  </div>

  <h4>Status Indicator</h4>
  <div class="card mb-32pt">
    <div class="card-body avatar-list">
      <p class="text-70">Add an online or offline status indicator to show user's availability.</p>

      <div class="avatar avatar-xxl avatar-offline">
        <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-xl avatar-online">
        <img src="assets/images/people/256/256_rsz_karl-s-973833-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-lg avatar-offline">
        <img src="assets/images/people/256/256_rsz_florian-perennes-594195-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-online">
        <img src="assets/images/people/256/256_rsz_james-gillespie-714755-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-sm avatar-offline">
        <img src="assets/images/people/256/256_rsz_sharina-mae-agellon-377466-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-xs avatar-online">
        <img src="assets/images/people/256/256_rsz_90-jiang-640827-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
    </div>
    <div class="card-footer">
      {% call hljs.component() -%}
<div class="avatar avatar-online">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>

<div class="avatar avatar-offline">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>    
      {%- endcall %}
    </div>
  </div>

  <h4>Shape</h4>
  <div class="card mb-32pt">
    <div class="card-body avatar-list">
      <p class="text-70">Change the shape of an avatar with the default Bootstrap image classes.</p>

      <div class="avatar avatar-xxl">
        <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
      </div>
      <div class="avatar avatar-xxl">
        <img src="assets/images/people/256/256_rsz_karl-s-973833-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar avatar-lg">
        <img src="assets/images/people/256/256_rsz_florian-perennes-594195-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
      </div>
      <div class="avatar avatar-lg">
        <img src="assets/images/people/256/256_rsz_james-gillespie-714755-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
      <div class="avatar">
        <img src="assets/images/people/256/256_rsz_sharina-mae-agellon-377466-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
      </div>
      <div class="avatar">
        <img src="assets/images/people/256/256_rsz_90-jiang-640827-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
      </div>
    </div>
    <div class="card-footer">
      {% call hljs.component() -%}
<div class="avatar">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
</div>

<div class="avatar">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
</div>    
      {%- endcall %}
    </div>
  </div>

  <h4>Ratio</h4>
  <div class="card mb-32pt">
    <div class="card-body avatar-list">
      <p class="text-70">Change the proportional relationship between the width and height of an avatar to 4 by 3 with an <code>.avatar-4by3</code> modifier.</p>

      <div class="avatar avatar-xxl avatar-4by3">
        <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
      </div>
      <div class="avatar avatar-xl avatar-4by3">
        <img src="assets/images/people/256/256_rsz_james-gillespie-714755-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
      </div>
      <div class="avatar avatar-lg avatar-4by3">
        <img src="assets/images/people/256/256_rsz_florian-perennes-594195-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
      </div>
      <div class="avatar avatar-4by3">
        <img src="assets/images/people/256/256_rsz_sharina-mae-agellon-377466-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
      </div>
    </div>
    <div class="card-footer">
      {% call hljs.component() -%}
<div class="avatar avatar-4by3">
  <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded">
</div>    
      {%- endcall %}
    </div>
  </div>
      
  <h4>Initials</h4>
  <div class="card mb-32pt">
    <div class="card-body avatar-list">
      <p class="text-70">You won't always have an image for every user, so easily use initials instead.</p>

      <div class="avatar avatar-xxl">
        <span class="avatar-title rounded-circle">LB</span>
      </div>
      <div class="avatar avatar-xl">
        <span class="avatar-title rounded-circle">LB</span>
      </div>
      <div class="avatar avatar-lg">
        <span class="avatar-title rounded-circle">LB</span>
      </div>
      <div class="avatar">
        <span class="avatar-title rounded-circle">LB</span>
      </div>
      <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle">LB</span>
      </div>
      <div class="avatar avatar-xs">
        <span class="avatar-title rounded-circle">LB</span>
      </div>
    </div>
    <div class="card-footer">
      {% call hljs.component() -%}
<div class="avatar">
  <span class="avatar-title rounded-circle">LB</span>
</div>    
      {%- endcall %}
    </div>
  </div>

  <h4>Groups</h4>
  <div class="card mb-0">
    <div class="card-body avatar-list">
      <p class="text-70">Easily group avatars of any size, shape and content with a single component. Each avatar can also use an <code>{{ '<a>' | escape }}</code> to link to the corresponding profile.</p>

      <div class="avatar-group">
        <div class="avatar avatar-lg">
          <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar avatar-lg">
          <img src="assets/images/people/256/256_rsz_karl-s-973833-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar avatar-lg">
          <img src="assets/images/people/256/256_rsz_florian-perennes-594195-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar avatar-lg">
          <span class="avatar-title rounded-circle">LB</span>
        </div>
      </div>

      <div class="avatar-group">
        <div class="avatar">
          <img src="assets/images/people/256/256_rsz_90-jiang-640827-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar">
          <img src="assets/images/people/256/256_rsz_sharina-mae-agellon-377466-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar">
          <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar">
          <span class="avatar-title rounded-circle">LB</span>
        </div>
      </div>

      <div class="avatar-group">
        <div class="avatar avatar-xs">
          <img src="assets/images/people/256/256_rsz_karl-s-973833-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar avatar-xs">
          <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar avatar-xs">
          <img src="assets/images/people/256/256_rsz_james-gillespie-714755-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
        </div>
        <div class="avatar avatar-xs">
          <span class="avatar-title rounded-circle">LB</span>
        </div>
      </div>
      
    </div>
    <div class="card-footer">
      {% call hljs.component() -%}
<div class="avatar-group">
  <div class="avatar">
    <img src="assets/images/people/256/256_rsz_nicolas-horn-689011-unsplash.jpg" alt="Avatar" class="avatar-img rounded-circle">
  </div>
  <div class="avatar">
    <span class="avatar-title rounded-circle">LB</span>
  </div>
</div>    
      {%- endcall %}
    </div>
  </div>
</div>