<section>
  <div class="avatar" data-size="large">
    <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
  </div>
  
  <article class="card" data-color="oklch(.5 .1 200)">
    <h2>Card heading</h2>
    <p>This is the card content</p>
  </article>
  
  <article class="card" data-progress="33%">
    <h2>Card heading</h2>
    <p>This is the card content</p>
  </article>
  
  <article class="card" data-stock="3">
    <h2>Card heading</h2>
    <p>This is the card content</p>
  </article>
  
  <article class="card" data-stock="34">
    <h2>Card heading</h2>
    <p>This is the card content</p>
  </article>
</section>