styleguide version 0.0.0

Section Keyfacts: Default 

<section class="supt-section-keyfacts ">
    <div class="supt-section-keyfacts__wrapper">
        <div class="container">
            <div class="supt-section-keyfacts__head row">
                <div class="col-12 col-md-10 offset-md-1">
                    <h2 class="supt-slide-up-title">Verisure through the numbers</h2>
                </div>
            </div>
            <div class="supt-section-keyfacts__body">
                <span class="supt-line">
                    <span class="supt-line__inner"></span>
                </span>

                <span class="supt-line">
                    <span class="supt-line__inner"></span>
                </span>
            </div>
        </div>
    </div>

    <div class="supt-section-keyfacts__cards">
        <div class="supt-section-keyfacts__card">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-sm-10 col-md-6 col-lg-5">
                        <div class="supt-card-keyfact  ">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
                                        <circle cx="87.87" cy="87.87" r="83.62" fill="none" stroke="#f03" stroke-miterlimit="10" stroke-width="5px" />
                                        <g transform="translate(0, 2)">
                                            <path fill="#f03" d="M113.37,95.44c-.25-.78-.88-1.39-1.67-1.62l-13.7-4.03-8.07-11.78c-.46-.68-1.23-1.08-2.06-1.08s-1.59.4-2.06,1.08l-8.07,11.78-13.7,4.03c-.79.23-1.41.84-1.67,1.62-.25.78-.11,1.64.4,2.29l8.71,11.31-.4,14.27c-.02.82.36,1.6,1.03,2.09.67.48,1.53.61,2.3.33l13.46-4.79,13.45,4.79c.76.27,1.65.14,2.3-.33.66-.48,1.05-1.26,1.02-2.08l-.4-14.28,8.71-11.31c.5-.65.65-1.51.4-2.29ZM99.77,106.7c-.35.45-.53,1.02-.52,1.59l.32,11.53-10.86-3.87c-.53-.19-1.14-.19-1.67,0l-10.86,3.87.32-11.52c.02-.57-.17-1.14-.52-1.59l-7.04-9.13,11.06-3.26c.55-.16,1.03-.51,1.35-.98l6.51-9.51,6.51,9.51c.32.47.8.82,1.35.98l11.06,3.26-7.03,9.13Z" />
                                            <path fill="#636466" d="M87.87,146.67c23.84,0,43.23-19.4,43.23-43.23,0-11.54-4.51-22.41-12.71-30.59l-1.22-1.22,22.57-42.55h-5.64l-20.85,39.3-2.13-1.37c-4.9-3.14-10.28-5.22-16-6.19l-3.17-.54,16.47-31.2h-5.64l-14.93,28.27-14.93-28.27h-5.64l16.47,31.2-3.17.54c-5.72.97-11.1,3.06-16,6.19l-2.13,1.36-20.85-39.3h-5.64l22.57,42.56-1.22,1.22c-8.19,8.18-12.71,19.04-12.71,30.58,0,23.84,19.4,43.23,43.24,43.23ZM87.87,65.18c21.09,0,38.25,17.16,38.25,38.25s-17.16,38.25-38.25,38.25-38.25-17.16-38.25-38.25,17.16-38.25,38.25-38.25Z" />
                                        </g>
                                    </svg>
                                </div>
                                <div class="supt-card-keyfact__content">
                                    <h4 class="supt-card-keyfact__title">
                                        Market leader
                                    </h4>
                                    <p class="supt-card-keyfact__description">
                                        In 13 of our 17 geographies
                                    </p>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="supt-section-keyfacts__card">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-sm-10 col-md-6 col-lg-5">
                        <div class="supt-card-keyfact  ">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__icon">
                                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_9755_1021)">
                                            <path d="M13.6325 7.27753C10.1275 7.27753 7.2775 10.1275 7.2775 13.6325C7.2775 17.1375 10.1275 19.9875 13.6325 19.9875C17.1375 19.9875 19.9875 17.1375 19.9875 13.6325C19.9875 10.1275 17.1375 7.27753 13.6325 7.27753ZM13.6325 18.77C10.8 18.77 8.495 16.465 8.495 13.6325C8.495 10.8 10.8 8.49503 13.6325 8.49503C16.465 8.49503 18.77 10.8 18.77 13.6325C18.77 16.465 16.465 18.77 13.6325 18.77Z" fill="#636466" />
                                            <path d="M14.2425 25.265L14.44 25.2525C17.2375 25.0625 19.875 23.86 21.8675 21.87C23.8575 19.88 25.06 17.24 25.25 14.4425L25.2625 14.245H26.655C26.99 14.245 27.265 13.9725 27.265 13.635C27.265 13.2975 26.9925 13.025 26.655 13.025H25.2625L25.25 12.8275C25.06 10.03 23.8575 7.3925 21.8675 5.4C19.8775 3.41 17.24 2.2075 14.44 2.0175L14.2425 2.005V0.61C14.2425 0.275 13.97 0 13.6325 0C13.295 0 13.0225 0.2725 13.0225 0.61V2.0025L12.825 2.015C10.0275 2.205 7.3875 3.4075 5.3975 5.3975C3.4075 7.3875 2.205 10.0275 2.015 12.825L2.0025 13.0225H0.61C0.275 13.0225 0 13.295 0 13.6325C0 13.97 0.2725 14.2425 0.61 14.2425H2.0025L2.015 14.44C2.205 17.2375 3.4075 19.875 5.3975 21.8675C7.3875 23.8575 10.0275 25.06 12.825 25.25L13.0225 25.2625V26.655C13.0225 26.99 13.295 27.265 13.6325 27.265C13.97 27.265 14.2425 26.9925 14.2425 26.655V25.2625V25.265ZM13.6325 22.0725C13.2975 22.0725 13.0225 22.345 13.0225 22.6825V24.045L12.7925 24.0275C7.75 23.625 3.6425 19.5175 3.24 14.475L3.2225 14.245H4.585C4.92 14.245 5.195 13.9725 5.195 13.635C5.195 13.2975 4.9225 13.025 4.585 13.025H3.2225L3.24 12.795C3.645 7.7525 7.75 3.645 12.795 3.24L13.025 3.2225V4.585C13.025 4.92 13.2975 5.195 13.635 5.195C13.9725 5.195 14.245 4.9225 14.245 4.585V3.2225L14.475 3.24C19.5175 3.6425 23.625 7.75 24.0275 12.7925L24.045 13.0225H22.6825C22.3475 13.0225 22.0725 13.295 22.0725 13.6325C22.0725 13.97 22.345 14.2425 22.6825 14.2425H24.045L24.0275 14.4725C23.625 19.515 19.5175 23.6225 14.475 24.025L14.245 24.0425V22.68C14.245 22.345 13.9725 22.07 13.635 22.07L13.6325 22.0725Z" fill="#636466" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_9755_1021">
                                                <rect width="27.2675" height="27.2675" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                                <div class="supt-card-keyfact__content">
                                    <h4 class="supt-card-keyfact__title">
                                        ~15
                                    </h4>
                                    <p class="supt-card-keyfact__description">
                                        Years average customer liferime
                                    </p>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="supt-section-keyfacts__card">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-sm-10 col-md-6 col-lg-5">
                        <div class="supt-card-keyfact  ">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 175.75 175.75">
                                        <circle cx="87.87" cy="87.87" r="83.62" fill="none" stroke="#f03" stroke-miterlimit="10" stroke-width="5px" />
                                        <g transform="translate(-4, 3)">
                                            <path fill="#f03" d="M74.19,97.73h12.98c1.32,0,2.4-1.07,2.4-2.4s-1.07-2.4-2.4-2.4h-10.49l.46-1.16c.83-2.11,2.56-3.05,4.75-4.25,3.42-1.87,7.67-4.19,7.67-11.67,0-4.9-3.99-8.89-8.89-8.89s-8.89,3.99-8.89,8.89c0,1.32,1.07,2.4,2.4,2.4s2.4-1.07,2.4-2.4c0-2.26,1.84-4.1,4.1-4.1s4.14,1.84,4.14,4.1c0,4.62-2.05,5.74-5.16,7.43-3.53,1.93-7.86,4.29-7.86,12.04,0,1.32,1.07,2.4,2.4,2.4Z" />
                                            <path fill="#f03" d="M107.31,97.73c1.32,0,2.4-1.07,2.4-2.4v-10.59h4.1c1.32,0,2.4-1.07,2.4-2.4s-1.07-2.4-2.4-2.4h-4.1v-10.59c0-1.32-1.07-2.4-2.4-2.4s-2.4,1.07-2.4,2.4v10.59h-8.19v-10.59c0-1.32-1.07-2.4-2.4-2.4s-2.4,1.07-2.4,2.4v12.98c0,1.32,1.07,2.4,2.4,2.4h10.59v10.59c0,1.32,1.07,2.4,2.4,2.4Z" />
                                            <path fill="#636466" d="M135.24,93.51c-1.29-.31-2.58.49-2.89,1.78-3.83,16.08-16.84,28.23-33.14,30.96-19.15,3.21-37.73-7.43-44.83-25.09l8.73,4.31c1.19.58,2.63.08,3.21-1.11h0c.58-1.2.08-2.63-1.11-3.21l-14.11-6.92c-1.25-.61-2.76-.03-3.28,1.27l-5.51,13.74c-.49,1.23.11,2.63,1.34,3.12h0c1.23.49,2.63-.11,3.12-1.34l3.2-7.95c7.97,19.66,28.68,31.5,50.03,27.92,18.2-3.05,32.73-16.63,37.01-34.58.31-1.29-.49-2.58-1.78-2.89Z" />
                                            <path fill="#636466" d="M48.62,75.15c1.29.31,2.58-.49,2.89-1.78,3.83-16.08,16.84-28.23,33.14-30.96,19.15-3.21,37.73,7.43,44.83,25.09l-8.73-4.31c-1.19-.58-2.63-.08-3.21,1.11h0c-.58,1.2-.08,2.63,1.11,3.21l14.11,6.92c1.25.61,2.76.03,3.28-1.27l5.51-13.74c.49-1.23-.11-2.63-1.34-3.12h0c-1.23-.49-2.63.11-3.12,1.34l-3.2,7.95c-7.97-19.66-28.68-31.5-50.03-27.92-18.2,3.05-32.73,16.63-37.01,34.58-.31,1.29.49,2.58,1.78,2.89Z" />
                                        </g>
                                    </svg>
                                </div>
                                <div class="supt-card-keyfact__content">
                                    <h4 class="supt-card-keyfact__title">
                                        Over 28K
                                    </h4>
                                    <p class="supt-card-keyfact__description">
                                        Colleagues
                                    </p>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="supt-section-keyfacts__card">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-sm-10 col-md-6 col-lg-5">
                        <div class="supt-card-keyfact  ">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__icon">
                                    <svg width="21" height="28" viewBox="0 0 21 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_9755_1000)">
                                            <path d="M9.37251 12.0601H5.38501C5.07251 12.0601 4.82001 12.3126 4.82001 12.6251V16.7101C4.82001 17.0226 5.07251 17.2751 5.38501 17.2751H9.37251C9.68501 17.2751 9.93751 17.0226 9.93751 16.7101V12.6251C9.93751 12.3126 9.68501 12.0601 9.37251 12.0601ZM8.81001 16.1451H5.95001V13.1876H8.81001V16.1451Z" fill="#636466" />
                                            <path d="M9.37251 17.67H5.38501C5.07251 17.67 4.82001 17.9225 4.82001 18.235V25.3675C4.82001 25.68 5.07251 25.9325 5.38501 25.9325H9.37251C9.68501 25.9325 9.93751 25.68 9.93751 25.3675V18.235C9.93751 17.9225 9.68501 17.67 9.37251 17.67ZM8.81001 24.8025H5.95001V18.7975H8.81001V24.8025Z" fill="#636466" />
                                            <path d="M15.4425 12.0601H11.455C11.1425 12.0601 10.89 12.3126 10.89 12.6251V16.7101C10.89 17.0226 11.1425 17.2751 11.455 17.2751H15.4425C15.755 17.2751 16.0075 17.0226 16.0075 16.7101V12.6251C16.0075 12.3126 15.755 12.0601 15.4425 12.0601ZM14.88 16.1451H12.0225V13.1876H14.88V16.1451Z" fill="#636466" />
                                            <path d="M15.4425 17.67H11.455C11.1425 17.67 10.89 17.9225 10.89 18.235V25.3675C10.89 25.68 11.1425 25.9325 11.455 25.9325H15.4425C15.755 25.9325 16.0075 25.68 16.0075 25.3675V18.235C16.0075 17.9225 15.755 17.67 15.4425 17.67ZM14.88 24.8025H12.0225V18.7975H14.88V24.8025Z" fill="#636466" />
                                            <path d="M10.415 0C4.6725 0 0 4.6725 0 10.415V27.1225C0 27.435 0.2525 27.6875 0.565 27.6875H20.265C20.5775 27.6875 20.83 27.435 20.83 27.1225V10.415C20.83 4.6725 16.1575 0 10.415 0ZM15.765 5.8625C16.6975 6.955 17.2975 8.335 17.42 9.85H11.7775L15.765 5.8625ZM10.98 9.0525V3.41C12.495 3.53 13.875 4.1325 14.9675 5.065L10.98 9.0525ZM9.85 9.0525L5.8625 5.065C6.955 4.135 8.335 3.5325 9.85 3.41V9.0525ZM5.065 5.8625L9.0525 9.85H3.41C3.53 8.335 4.1325 6.955 5.065 5.8625ZM3.385 10.98H17.4425V26.5575H3.385V10.98ZM19.7 26.5575H18.5725V10.415C18.5725 5.9175 14.9125 2.2575 10.415 2.2575C5.9175 2.2575 2.2575 5.9175 2.2575 10.415V26.5575H1.13V10.415C1.1275 5.295 5.295 1.1275 10.415 1.1275C15.535 1.1275 19.7 5.2925 19.7 10.4125V26.555V26.5575Z" fill="#636466" />
                                            <path d="M16.63 18.1826C17.0263 18.1826 17.3475 17.8613 17.3475 17.4651C17.3475 17.0688 17.0263 16.7476 16.63 16.7476C16.2337 16.7476 15.9125 17.0688 15.9125 17.4651C15.9125 17.8613 16.2337 18.1826 16.63 18.1826Z" fill="#636466" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_9755_1000">
                                                <rect width="20.83" height="27.685" fill="white" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                                <div class="supt-card-keyfact__content">
                                    <h4 class="supt-card-keyfact__title">
                                        ~20%
                                    </h4>
                                    <p class="supt-card-keyfact__description">
                                        Fully loaded IRR per new customer
                                    </p>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

No notes defined.

<section class="supt-section-keyfacts {{ modifiers|modifiersAttr }}">
	<div class="supt-section-keyfacts__wrapper">
		<div class="container">
			<div class="supt-section-keyfacts__head row">
				<div class="col-12 col-md-10 offset-md-1">
					<h2 class="supt-slide-up-title">{{ title }}</h2>
					{% if description %}
						<p class="supt-section-keyfacts__description supt-slide-up-title">{{ description }}</p>
					{% endif %}
				</div>
			</div>
			<div class="supt-section-keyfacts__body">
				{% if modifiers|contains('dark') %}
					{% include 'atoms/line/line--glow.twig' %}
				{% else %}
					{% include 'atoms/line/line.twig' %}
				{% endif %}
				{# Horizontal line #}
				{% if not modifiers|contains('dark') %}
					{% include 'atoms/line/line.twig' %}
				{% endif %}
			</div>
		</div>
	</div>

	<div class="supt-section-keyfacts__cards">
		{% for item in items %}
			<div class="supt-section-keyfacts__card">
				<div class="container">
					<div class="row justify-content-center">
						<div class="col-12 col-sm-10 col-md-6 col-lg-5">
							{% include 'molecules/cards/card-keyfact/card-keyfact.twig' with {modifiers: modifiers}|merge(item) only %}
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	</div>
</section>
 
{
  "title": "Verisure through the numbers",
  "items": [
    {
      "title": "Market leader",
      "description": "In 13 of our 17 geographies",
      "icon": "award"
    },
    {
      "title": "~15",
      "description": "Years average customer liferime",
      "icon": "target"
    },
    {
      "title": "Over 28K",
      "description": "Colleagues",
      "icon": "24h"
    },
    {
      "title": "~20%",
      "description": "Fully loaded IRR per new customer",
      "icon": "window"
    }
  ]
}
  • Content: 
    import { animate, onScroll } from 'animejs';
import { Sizes } from '@/js/Sizes';
import { Line, LineGlow } from '@/components/atoms/line';

export class SectionKeyfacts {
	$element: HTMLElement;
	$verticalLine: HTMLElement;
	$cardsWrapper: HTMLElement;
	$cards: NodeListOf<HTMLElement>;
	verticalLine: Line | LineGlow;
	horizontalLine: Line | null = null;
	sizes: Sizes;
	isDark: boolean;

	constructor($element: HTMLElement) {
		this.$element = $element;
		this.$cards = this.$element.querySelectorAll<HTMLElement>('.supt-card-keyfact');
		this.$verticalLine = this.$element.querySelector('.supt-line:first-child') as HTMLElement;
		this.$cardsWrapper = this.$element.querySelector(
			'.supt-section-keyfacts__cards'
		) as HTMLElement;

		this.sizes = new Sizes(); // Singleton
		this.isDark = this.$element.classList.contains('-dark');

		// Vertical line
		const verticalLineOptions = {
			scale: {
				mobile: { x: [1, 1], y: [0, 1] },
				desktop: { x: [1, 1], y: [0, 1] },
			},
			threshold: {
				enter: 'center top',
				leave: 'center bottom',
			},
		};
		this.verticalLine = this.isDark
			? new LineGlow(this.$verticalLine, this.$element, verticalLineOptions)
			: new Line(this.$verticalLine, this.$element, verticalLineOptions);

		// Horizontal line
		const horizontalLineOptions = {
			scale: {
				mobile: { x: [0, 1], y: [1, 1] },
				desktop: { x: [0, 1], y: [1, 1] },
			},
			threshold: {
				enter: 'center bottom',
			},
			sync: 'play play reverse reverse',
		};
		const $horizontalLine = this.$element.querySelector('.supt-line:last-child') as HTMLElement;
		if ($horizontalLine) {
			this.horizontalLine = new Line($horizontalLine, this.$element, horizontalLineOptions);
		}

		// Animate next section's horizontal line when next section is logoboard
		const $nextSection = this.$element.nextElementSibling as HTMLElement;
		if ($nextSection && $nextSection.classList.contains('supt-section-logoboard')) {
			const $nextSectionHorizontalLine = $nextSection.querySelector(
				'.supt-line:last-child'
			) as HTMLElement;
			new Line($nextSectionHorizontalLine, this.$element, horizontalLineOptions);
		}

		this.setSectionHeight();

		this.setupScrollAnimations();
	}

	setSectionHeight() {
		const totalCards = this.$cards.length;
		const height = totalCards * 100 - 50;

		this.$element.style.height = `${height}vh`;
	}

	setupScrollAnimations() {
		// Add parallax effect to the cards with varying distances
		this.$cards.forEach((card, index) => {
			let scale = [0.8, 1, 1, 0.8];
			if (index === 0) {
				scale = [1, 1, 1, 0.8];
			} else if (index == this.$cards.length - 1) {
				scale = [0.8, 1, 1, 1];
			}

			const $iconCircle = card.querySelector(
				'.supt-card-keyfact__icon svg > circle:first-child'
			) as HTMLElement;

			animate(card, {
				scale,
				// translateY: [translateYValue, '0%'],
				autoplay: onScroll({
					container: document.body,
					target: card,
					enter: 'bottom top',
					leave: 'top bottom',
					sync: true,
				}),
			});

			animate($iconCircle, {
				strokeDashoffset: 0,
				autoplay: onScroll({
					container: document.body,
					target: card,
					enter: 'center center',
					sync: 'play play reverse reverse',
					onLeaveBackward: () => {
						card.classList.remove('-visible');
					},
					onEnterForward: () => {
						card.classList.add('-visible');
					},
				}),
			});
		});
	}
}
  • URL: /components/raw/section-keyfacts/index.ts
  • Filesystem Path: src/components/organisms/section-keyfacts/index.ts
  • Size: 3.4 KB
  • Content: 
    .supt-section-keyfacts {
	background-color: $color-grey-background;
	height: 350vh;
	position: relative;
	@mixin clamp padding-top, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;

	@media (max-width: calc($breakpoint-sm - 1px)) {
		padding-inline: $spacing-1;
	}

	&__wrapper {
		height: 100vh;

		position: sticky;
		padding-top: $spacing-8;
		top: 70px;
		@media (min-width: $breakpoint-md) {
			top: 82px;
		}
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		@mixin clamp gap, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
	}

	&__head {
		h1,
		h2,
		h3,
		h4 {
			@extend %t-h2;
			margin: 0;
			text-align: center;
		}
	}

	&__description {
		@extend %t-body-sm;
		margin-top: $spacing-4;
		text-align: center;
	}

	&__body {
		position: relative;
		height: 100%;

		@media (max-width: calc($breakpoint-md - 1px)) {
			display: flex;
			flex-direction: column;
			gap: $spacing-4;
			padding-top: $spacing-8;
		}

		.supt-line {
			&:first-child {
				--line-xs-width: 1px;
				--line-xs-height: 100%;
				--line-md-width: 1px;
				--line-md-height: 100%;

				position: absolute;
				top: 0;
				left: calc(50% - 0.5px);

				.supt-line__inner {
					transform: scaleY(0);
					transform-origin: top;
				}

				&.-glow {
					left: 0;
				}
			}

			&:last-child {
				--line-xs-width: 100%;
				--line-xs-height: 1px;
				--line-md-width: 100%;
				--line-md-height: 1px;

				position: absolute;
				bottom: 0;
				left: 0;

				.supt-line__inner {
					transform: scaleX(0);
				}
			}
		}
	}

	&__cards {
		position: absolute;
		inset: 0;
		padding-top: 37.5vh;
	}

	&__card {
		width: 100%;
		position: sticky;

		height: 75vh;
		top: 25vh;
		padding-top: 17.5vh;

		top: calc(25vh + 70px);
		@media (min-width: $breakpoint-md) {
			top: calc(25vh + 82px);
		}
	}

	&.-dark {
		background: none; /* Coming from body background */

		.supt-section-keyfacts__head {
			h1,
			h2,
			h3,
			h4 {
				color: $color-white;
			}
		}

		.supt-section-keyfacts__description {
			color: $color-white;
		}
	}

	& + .supt-section-logoboard {
		.supt-section-logoboard__head {
			h1,
			h2,
			h3,
			h4 {
				border-top: 0;
			}
		}
	}

	& + .supt-section-cards {
		@mixin clamp padding-top, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
	}
}
  • URL: /components/raw/section-keyfacts/section-keyfacts.css
  • Filesystem Path: src/components/organisms/section-keyfacts/section-keyfacts.css
  • Size: 2.3 KB