<div class="block-icon-text-group bg-gray-lighter text-center py-16 px-8 md:px-0">
    <h2 class="text-3xl font-light">Why Use Component Library</h2>
    <div class="block-stats__row block md:flex md:flex-wrap md:justify-center">
        <div class="icon-text w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-8 mt-8 md:mt-12">
            <img class="mx-auto" src="https://via.placeholder.com/64" alt="icon">
            <div class="description text-gray-darkest text-sm md:text-base text-center leading-normal mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque.</div>
        </div>
        <div class="icon-text w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-8 mt-8 md:mt-12">
            <img class="mx-auto" src="https://via.placeholder.com/64" alt="icon">
            <div class="description text-gray-darkest text-sm md:text-base text-center leading-normal mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque.</div>
        </div>
        <div class="icon-text w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-8 mt-8 md:mt-12">
            <img class="mx-auto" src="https://via.placeholder.com/64" alt="icon">
            <div class="description text-gray-darkest text-sm md:text-base text-center leading-normal mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque.</div>
        </div>
        <div class="icon-text w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-8 mt-8 md:mt-12">
            <img class="mx-auto" src="https://via.placeholder.com/64" alt="icon">
            <div class="description text-gray-darkest text-sm md:text-base text-center leading-normal mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque.</div>
        </div>
        <div class="icon-text w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-8 mt-8 md:mt-12">
            <img class="mx-auto" src="https://via.placeholder.com/64" alt="icon">
            <div class="description text-gray-darkest text-sm md:text-base text-center leading-normal mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque.</div>
        </div>
        <div class="icon-text w-full sm:w-1/2 lg:w-1/3 xl:w-1/4 px-8 mt-8 md:mt-12">
            <img class="mx-auto" src="https://via.placeholder.com/64" alt="icon">
            <div class="description text-gray-darkest text-sm md:text-base text-center leading-normal mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque.</div>
        </div>
    </div>
</div>
<div class="block-icon-text-group bg-gray-lighter text-center py-16 px-8 md:px-0">
  <h2 class="text-3xl font-light">{{heading}}</h2>
  <div class="block-stats__row block md:flex md:flex-wrap md:justify-center">
      {{#each cards}}
        {{> @icon-text}}
      {{/each}}
  </div>
</div>
{
  "heading": "Why Use Component Library",
  "cards": [
    {
      "img": {
        "src": "https://via.placeholder.com/64",
        "alt": "icon"
      },
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque."
    },
    {
      "img": {
        "src": "https://via.placeholder.com/64",
        "alt": "icon"
      },
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque."
    },
    {
      "img": {
        "src": "https://via.placeholder.com/64",
        "alt": "icon"
      },
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque."
    },
    {
      "img": {
        "src": "https://via.placeholder.com/64",
        "alt": "icon"
      },
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque."
    },
    {
      "img": {
        "src": "https://via.placeholder.com/64",
        "alt": "icon"
      },
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque."
    },
    {
      "img": {
        "src": "https://via.placeholder.com/64",
        "alt": "icon"
      },
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu egestas eros, et consequat neque."
    }
  ]
}
  • Handle: @block-icon-text-group
  • Preview:
  • Filesystem Path: components/05-layout-components/block-icon-text-group/block-icon-text-group.hbs
  • References (1): @icon-text

There are no notes for this item.