<section class="supt-section-keyfacts -dark">
    <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">People protecting people</h2>
                    <p class="supt-section-keyfacts__description supt-slide-up-title">Our DNA is at the core of who we are at Verisure. Everything we do is driven by our unique DNA, and these five values guide us all.</p>
                </div>
            </div>
            <div class="supt-section-keyfacts__body">
                <span class="supt-line -glow">
                    <span class="supt-line__line -first">
                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-line__glow">
                            <g filter="url(#supt-line-filter-glow)">
                                <path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke" />
                            </g>
                        </svg>
                    </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 -no-icon -dark">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__content">
                                    <p class="supt-card-keyfact__description">
                                        <strong>Passionate</strong> in everything we do
                                    </p>
                                </div>

                            </div>

                            <span class="supt-button__wrapper">
                                <span class="supt-button__inner">
                                    <span class="supt-button__title -clone" aria-hidden="true">

                                    </span>
                                    <span class="supt-button__mask">
                                        <span class="supt-button__mask__inner"></span>
                                    </span>
                                </span>
                            </span>
                        </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 -no-icon -dark">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__content">
                                    <p class="supt-card-keyfact__description">
                                        <strong>Committed</strong> to making a difference
                                    </p>
                                </div>

                            </div>

                            <span class="supt-button__wrapper">
                                <span class="supt-button__inner">
                                    <span class="supt-button__title -clone" aria-hidden="true">

                                    </span>
                                    <span class="supt-button__mask">
                                        <span class="supt-button__mask__inner"></span>
                                    </span>
                                </span>
                            </span>
                        </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 -no-icon -dark">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__content">
                                    <p class="supt-card-keyfact__description">
                                        Always <strong>Innovating</strong>
                                    </p>
                                </div>

                            </div>

                            <span class="supt-button__wrapper">
                                <span class="supt-button__inner">
                                    <span class="supt-button__title -clone" aria-hidden="true">

                                    </span>
                                    <span class="supt-button__mask">
                                        <span class="supt-button__mask__inner"></span>
                                    </span>
                                </span>
                            </span>
                        </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 -no-icon -dark">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__content">
                                    <p class="supt-card-keyfact__description">
                                        <strong>Winning</strong> as a <strong>Team</strong>
                                    </p>
                                </div>

                            </div>

                            <span class="supt-button__wrapper">
                                <span class="supt-button__inner">
                                    <span class="supt-button__title -clone" aria-hidden="true">

                                    </span>
                                    <span class="supt-button__mask">
                                        <span class="supt-button__mask__inner"></span>
                                    </span>
                                </span>
                            </span>
                        </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 -no-icon -dark">
                            <div class="supt-card-keyfact__inner">
                                <div class="supt-card-keyfact__content">
                                    <p class="supt-card-keyfact__description">
                                        With <strong>Trust & Responsibility</strong>
                                    </p>
                                </div>

                            </div>

                            <span class="supt-button__wrapper">
                                <span class="supt-button__inner">
                                    <span class="supt-button__title -clone" aria-hidden="true">

                                    </span>
                                    <span class="supt-button__mask">
                                        <span class="supt-button__mask__inner"></span>
                                    </span>
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="supt-dna">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col col-12 col-md-10 col-lg-8">
                <img src="/sites/gv/files/flmngr/superhuit/about-us/our-values/Verisure-DNA.png" alt="Verisure DNA" class="supt-dna__image" />
            </div>
        </div>
    </div>
</section>

No notes defined.

{% include "organisms/section-keyfacts/section-keyfacts.twig" with facts only %}
<section class="supt-dna">
	<div class="container">
		<div class="row justify-content-center">
			<div class="col col-12 col-md-10 col-lg-8">
				<img src="{{ path(image.src) }}" alt="{{ image.alt }}" class="supt-dna__image"/>
			</div>
		</div>
	</div>
</section>
{
  "image": {
    "src": "/sites/gv/files/flmngr/superhuit/about-us/our-values/Verisure-DNA.png",
    "alt": "Verisure DNA"
  },
  "facts": {
    "modifiers": [
      "dark"
    ],
    "title": "People protecting people",
    "description": "Our DNA is at the core of who we are at Verisure. Everything we do is driven by our unique DNA, and these five values guide us all.",
    "items": [
      {
        "description": "<strong>Passionate</strong> in everything we do"
      },
      {
        "description": "<strong>Committed</strong> to making a difference"
      },
      {
        "description": "Always <strong>Innovating</strong>"
      },
      {
        "description": "<strong>Winning</strong> as a <strong>Team</strong>"
      },
      {
        "description": "With <strong>Trust & Responsibility</strong>"
      }
    ]
  }
}
  • Content:
    .supt-dna {
    	@mixin clamp padding-bottom, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
    
    	&__image {
    		width: 100%;
    		height: auto;
    		object-fit: cover;
    		object-position: center;
    		margin-top: $spacing-12;
    		filter: drop-shadow(8px 8px 16px rgba(102, 0, 14, 0.6))
    			drop-shadow(-8px -8px 16px rgba(233, 53, 89, 0.4));
    	}
    
    	& + .supt-section-keyfacts {
    		padding-top: 0;
    	}
    }
    
  • URL: /components/raw/section-dna/section-dna.css
  • Filesystem Path: src/components/organisms/section-dna/section-dna.css
  • Size: 388 Bytes