Gigaclear Pattern Library

Summary Card List Component: Counters 

<div class="js-component relative z-0 component-spacer-padding bg-grey-50">
    <div class="container relative">

        <div class="max-w-screen-xl mx-auto">

            <div class="text-center mb-10 lg:mb-16">
                <div>

                    <div class="uppercase text-grey-600 mb-3 font-semibold">
                        <p>Heading Label</p>
                    </div>

                    <h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo  mb-4 lg:mb-6">Switching is easy</h2>
                </div>
                <div class="">

                    <div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl  max-w-screen-sm mx-auto">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>

                </div>
            </div>

        </div>

        <div class="grid grid-cols-1 gap-8  md:grid-cols-3 ">

            <a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl  card-hover bg-white   px-6 lg:px-11 pb-14 lg:pb-12 ">
                <div class="w-full flex justify-center overflow-hidden">
                    <div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">

                        <div class="w-full h-16">
                            <svg class="fill-current w-full h-full text-white" aria-hidden="true">
                                <use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
                            </svg>
                        </div>

                    </div>
                </div>
                <div>

                    <div class="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="10" data-suffix="" data-prefix="">0</span></div>

                    <h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
                </div>
                <div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
                </div>
            </a>

            <a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl  card-hover bg-white   px-6 lg:px-11 pb-14 lg:pb-12 ">
                <div class="w-full flex justify-center overflow-hidden">
                    <div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">

                        <div class="w-full h-16">
                            <svg class="fill-current w-full h-full text-white" aria-hidden="true">
                                <use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
                            </svg>
                        </div>

                    </div>
                </div>
                <div>

                    <div class="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="100" data-suffix="%" data-prefix="">0</span></div>

                    <h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
                </div>
                <div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
                </div>
            </a>

            <a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl  card-hover bg-white   px-6 lg:px-11 pb-14 lg:pb-12 ">
                <div class="w-full flex justify-center overflow-hidden">
                    <div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">

                        <div class="w-full h-16">
                            <svg class="fill-current w-full h-full text-white" aria-hidden="true">
                                <use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
                            </svg>
                        </div>

                    </div>
                </div>
                <div>

                    <div class="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="50" data-suffix="" data-prefix="">0</span></div>

                    <h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
                </div>
                <div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
                </div>
            </a>

        </div>
    </div>
</div>
 
{% if bgContrast %}
    {% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
    {% set bgClass = "component-spacer-margin" %}
{% endif %}

{% if itemHeadingColour %}
    {% set itemHeadingColourClass = itemHeadingColour %}
{% else %}
   {% set itemHeadingColourClass = "text-bravo" %}
{% endif %}

<div class="js-component relative z-0 {{bgClass}}">
    <div class="container relative">
        {% if headline %}
        <div class="max-w-screen-xl mx-auto">
            {% render "@headline", headline %}
        </div>
        {% endif %}
        <div class="grid grid-cols-1 gap-8 {% if summaryList.length == 4 %} md:grid-cols-4 {% else %} md:grid-cols-3 {% endif %}">
            {% for item in summaryList %}
                <a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl  card-hover {% if bgContrast %}bg-white {% else %} bg-grey-50 {% endif %} {% if summaryList.length == 4 %} px-6 pb-14 lg:pb-9 {% else %} px-6 lg:px-11 pb-14 lg:pb-12 {% endif %}">
                    <div class="w-full flex justify-center overflow-hidden">
                        <div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300"  data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
                            {% if item.icon %}
                                <div class="w-full h-16">
                                    {% render "@icon", { name: item.icon, modifier: "fill-current w-full h-full text-white", ariaHidden: true } %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div> 
                        {% if item.counter %}
                            <div class="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="{{ item.counter }}" data-suffix="{{item.suffix}}" data-prefix="{{item.prefix}}">0</span></div>
                        {% endif %}
                        <h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">{{ item.heading }}</h2>
                    </div>
                    <div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
                        {{ item.copy }}
                    </div>
                </a>
            {% endfor %}
        </div>
    </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library",
  "headline": {
    "preheading": "Heading Label",
    "heading": "Switching is easy",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  },
  "summaryList": [
    {
      "counter": "10",
      "prefix": "",
      "suffix": "",
      "heading": "Lorem ipsum dolor",
      "copy": " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
      "icon": "icon-pin"
    },
    {
      "counter": "100",
      "prefix": "",
      "suffix": "%",
      "heading": "Lorem ipsum dolor",
      "copy": " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
      "icon": "icon-pin"
    },
    {
      "counter": "50",
      "prefix": "",
      "suffix": "",
      "heading": "Lorem ipsum dolor",
      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
      "icon": "icon-pin"
    }
  ],
  "bgContrast": true
}
  • Handle: @summary-card-list-component--counters
  • Preview:
  • Filesystem Path: fractal\components\02-umbraco-repeatable-components\summary-card-list-component\summary-card-list-component.nunjucks
  • References (2): @headline, @icon

No notes defined.