ETR Component Library

Stats Block 

<div class="block-stats bg-gray-lighter text-center py-16 px-8 md:px-0">
    <h2 class="text-3xl font-light">By The Numbers</h2>
    <p class="leading-normal text-gray-darkest text-sm md:text-base leading-normal max-w-3xl mx-auto mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor urna nisl, rutrum tincidunt odio sagittis quis. Nam tincidunt ex sed tortor viverra, maximus tempor lacus vulputate. </p>

    <div class="block-stats__row block md:flex  mt-8 md:mt-12">
        <div class="stat text-center md:w-1/3 px-12 py-6 md:py-0">
            <div class="text-lg font-bold text-gray-darkest uppercase mb-2 leading-none">Over</div>
            <div class="text-primary text-7xl font-bold tracking-tighter leading-none">200</div>
            <div class="text-lg font-bold text-gray-darkest uppercase leading-none">Thousand</div>
            <div class="mt-4 text-gray-darkest text-base md:text-lg leading-normal">People have visited The Stadtbibliothek Stuttgart in the past year</div>
        </div>
        <div class="stat text-center md:w-1/3 px-12 py-6 md:py-0">
            <div class="text-lg font-bold text-gray-darkest uppercase mb-2 leading-none">Over</div>
            <div class="text-primary text-7xl font-bold tracking-tighter leading-none">100</div>
            <div class="text-lg font-bold text-gray-darkest uppercase leading-none">Million</div>
            <div class="mt-4 text-gray-darkest text-base md:text-lg leading-normal">Books are contained in the library&#x27;s five-story central corridor.</div>
        </div>
        <div class="stat text-center md:w-1/3 px-12 py-6 md:py-0">
            <div class="text-lg font-bold text-gray-darkest uppercase mb-2 leading-none">Over</div>
            <div class="text-primary text-7xl font-bold tracking-tighter leading-none">500</div>
            <div class="text-lg font-bold text-gray-darkest uppercase leading-none">Meters</div>
            <div class="mt-4 text-gray-darkest text-base md:text-lg leading-normal">of electrical wire used to light up the 3000 square footbuilding.</div>
        </div>
    </div>

</div>
 
<div class="block-stats bg-gray-lighter text-center py-16 px-8 md:px-0">
  <h2 class="text-3xl font-light">{{heading}}</h2>
  <p class="leading-normal text-gray-darkest text-sm md:text-base leading-normal max-w-3xl mx-auto mt-4">{{description}}</p>

    <div class="block-stats__row block md:flex  mt-8 md:mt-12">
       {{#each cards}}
        {{> @stat}}
      {{/each}}
    </div>


</div>
 
{
  "heading": "By The Numbers",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor urna nisl, rutrum tincidunt odio sagittis quis. Nam tincidunt ex sed tortor viverra, maximus tempor lacus vulputate. ",
  "cards": [
    {
      "superheading": "Over",
      "stat": "200",
      "subheading": "Thousand",
      "description": "People have visited The Stadtbibliothek Stuttgart in the past year"
    },
    {
      "superheading": "Over",
      "stat": "100",
      "subheading": "Million",
      "description": "Books are contained in the library's five-story central corridor."
    },
    {
      "superheading": "Over",
      "stat": "500",
      "subheading": "Meters",
      "description": "of electrical wire used to light up the 3000 square footbuilding."
    }
  ]
}

There are no notes for this item.