<div class="o-grid">
<div class="o-grid-12@xs o-grid-6@md o-grid-4@lg">
<div class="c-person c-person--extended" data-component="person">
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="itemscope" itemtype="http://schema.org/Person" data-uid="6a94c4d486d60" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a94c4d486960" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a94c4d48622a" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a94c4d486299" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a94c4d4862fd" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://i.pravatar.cc/144?img=0" alt="John Doe" />
</div>
</figure>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="6a94c4d4863e3" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a94c4d48641b" data-component="typography">Web Developer, IT Department</span>
</div>
</div>
</div><!-- typography.blade.php original: div -->
<div class="c-typography u-margin__x--2 u-margin__bottom--1 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d48646b" data-component="typography">
John is a skilled web developer with over 10 years of experience in creating dynamic and responsive websites. He specializes in front-end development and has a passion for crafting
user-friendly interfaces.
</div>
<div class="c-accordion c-accordion" style="--c-accordion--heading-count: 1;" id="id_6a94c4d4868ff" data-uid="6a94c4d486906" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d48651d" data-uid="6a94c4d48652c" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d4866ed" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d48656d" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d486720" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" translate="no" data-uid="6a94c4d4864be" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</details>
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d4867a4" data-uid="6a94c4d4867af" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d486875" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d4867e5" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d48689d" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d486778" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</details>
</div>
</div>
<div class="c-card__footer u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1" data-uid="6a94c4d486cf0" data-component="card__footer">
<span data-tooltip="john.doe@example.com"><a class="c-button c-button--email u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="email" href=
"mailto:john.doe@example.com" target="_top" aria-label="Email" data-uid="6a94c4d4869e2" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Email</span></span></a></span>
<span data-tooltip="+46 123 456 789"><a class="c-button u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="telephone" href="tel:+46123456789" target="_top"
aria-label="Call" data-uid="6a94c4d486a83" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Call</span></span></a></span> <a class=
"c-button c-button--some c-button--linkedin u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="linkedin" title=
"LinkedIn" aria-label="linkedin" href="https://www.linkedin.com/in/johndoe" target="_top" data-uid="6a94c4d486b15" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d486b58"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z"
fill-rule="evenodd"></path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--twitter u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="twitter" title="Twitter"
aria-label="twitter" href="https://twitter.com/johndoe" target="_top" data-uid="6a94c4d486bd1" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d486c06"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z">
</path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--facebook u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="facebook" title=
"Facebook" aria-label="facebook" href="https://www.facebook.com/johndoe" target="_top" data-uid="6a94c4d486c60" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d486c8d"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z">
</path></svg></span></span></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid-12@xs o-grid-6@md o-grid-4@lg">
<div class="c-person c-person--extended" data-component="person">
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="itemscope" itemtype="http://schema.org/Person" data-uid="6a94c4d487583" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a94c4d4871e3" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a94c4d486de6" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a94c4d486e13" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a94c4d486e3f" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://i.pravatar.cc/144?img=1" alt="John Doe" />
</div>
</figure>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="6a94c4d486e9f" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a94c4d486ec7" data-component="typography">Web Developer, IT Department</span>
</div>
</div>
</div><!-- typography.blade.php original: div -->
<div class="c-typography u-margin__x--2 u-margin__bottom--1 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d486ef0" data-component="typography">
John is a skilled web developer with over 10 years of experience in creating dynamic and responsive websites. He specializes in front-end development and has a passion for crafting
user-friendly interfaces.
</div>
<div class="c-accordion c-accordion" style="--c-accordion--heading-count: 1;" id="id_6a94c4d4871aa" data-uid="6a94c4d4871b1" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d486f47" data-uid="6a94c4d486f50" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d487008" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d486f8f" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d487032" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" translate="no" data-uid="6a94c4d486f24" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</details>
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d4870b6" data-uid="6a94c4d4870bf" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d487154" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d4870ef" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d48717c" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d487083" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</details>
</div>
</div>
<div class="c-card__footer u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1" data-uid="6a94c4d487539" data-component="card__footer">
<span data-tooltip="john.doe@example.com"><a class="c-button c-button--email u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="email" href=
"mailto:john.doe@example.com" target="_top" aria-label="Email" data-uid="6a94c4d48722f" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Email</span></span></a></span>
<span data-tooltip="+46 123 456 789"><a class="c-button u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="telephone" href="tel:+46123456789" target="_top"
aria-label="Call" data-uid="6a94c4d4872c2" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Call</span></span></a></span> <a class=
"c-button c-button--some c-button--linkedin u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="linkedin" title=
"LinkedIn" aria-label="linkedin" href="https://www.linkedin.com/in/johndoe" target="_top" data-uid="6a94c4d487366" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d4873a8"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z"
fill-rule="evenodd"></path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--twitter u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="twitter" title="Twitter"
aria-label="twitter" href="https://twitter.com/johndoe" target="_top" data-uid="6a94c4d48741c" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d48745f"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z">
</path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--facebook u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="facebook" title=
"Facebook" aria-label="facebook" href="https://www.facebook.com/johndoe" target="_top" data-uid="6a94c4d4874c2" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d4874f4"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z">
</path></svg></span></span></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid-12@xs o-grid-6@md o-grid-4@lg">
<div class="c-person c-person--extended" data-component="person">
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="itemscope" itemtype="http://schema.org/Person" data-uid="6a94c4d487dbf" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a94c4d487a24" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a94c4d487620" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a94c4d487651" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a94c4d48767f" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://i.pravatar.cc/144?img=2" alt="John Doe" />
</div>
</figure>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="6a94c4d4876e8" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a94c4d487715" data-component="typography">Web Developer, IT Department</span>
</div>
</div>
</div><!-- typography.blade.php original: div -->
<div class="c-typography u-margin__x--2 u-margin__bottom--1 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d487744" data-component="typography">
John is a skilled web developer with over 10 years of experience in creating dynamic and responsive websites. He specializes in front-end development and has a passion for crafting
user-friendly interfaces.
</div>
<div class="c-accordion c-accordion" style="--c-accordion--heading-count: 1;" id="id_6a94c4d4879ee" data-uid="6a94c4d4879f4" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d4877c5" data-uid="6a94c4d4877d0" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d48786d" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d487801" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d487898" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" translate="no" data-uid="6a94c4d48778c" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</details>
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d487909" data-uid="6a94c4d487912" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d48799e" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d48793e" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d4879c3" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d4878d9" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</details>
</div>
</div>
<div class="c-card__footer u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1" data-uid="6a94c4d487d70" data-component="card__footer">
<span data-tooltip="john.doe@example.com"><a class="c-button c-button--email u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="email" href=
"mailto:john.doe@example.com" target="_top" aria-label="Email" data-uid="6a94c4d487a7c" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Email</span></span></a></span>
<span data-tooltip="+46 123 456 789"><a class="c-button u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="telephone" href="tel:+46123456789" target="_top"
aria-label="Call" data-uid="6a94c4d487b1a" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Call</span></span></a></span> <a class=
"c-button c-button--some c-button--linkedin u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="linkedin" title=
"LinkedIn" aria-label="linkedin" href="https://www.linkedin.com/in/johndoe" target="_top" data-uid="6a94c4d487bb3" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d487be7"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z"
fill-rule="evenodd"></path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--twitter u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="twitter" title="Twitter"
aria-label="twitter" href="https://twitter.com/johndoe" target="_top" data-uid="6a94c4d487c4e" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d487c80"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z">
</path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--facebook u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="facebook" title=
"Facebook" aria-label="facebook" href="https://www.facebook.com/johndoe" target="_top" data-uid="6a94c4d487ce2" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d487d14"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z">
</path></svg></span></span></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid-12@xs o-grid-6@md o-grid-4@lg">
<div class="c-person c-person--extended" data-component="person">
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="itemscope" itemtype="http://schema.org/Person" data-uid="6a94c4d48863e" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a94c4d488277" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a94c4d487e51" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a94c4d487e83" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a94c4d487eb3" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://i.pravatar.cc/144?img=3" alt="John Doe" />
</div>
</figure>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="6a94c4d487f2d" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a94c4d487f5c" data-component="typography">Web Developer, IT Department</span>
</div>
</div>
</div><!-- typography.blade.php original: div -->
<div class="c-typography u-margin__x--2 u-margin__bottom--1 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d487fa0" data-component="typography">
John is a skilled web developer with over 10 years of experience in creating dynamic and responsive websites. He specializes in front-end development and has a passion for crafting
user-friendly interfaces.
</div>
<div class="c-accordion c-accordion" style="--c-accordion--heading-count: 1;" id="id_6a94c4d48823e" data-uid="6a94c4d488245" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d488001" data-uid="6a94c4d48800b" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d4880b1" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d48803b" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d4880db" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" translate="no" data-uid="6a94c4d487fdb" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</details>
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d48813f" data-uid="6a94c4d488149" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d4881e7" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d48817a" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d488210" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d48811a" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</details>
</div>
</div>
<div class="c-card__footer u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1" data-uid="6a94c4d4885ee" data-component="card__footer">
<span data-tooltip="john.doe@example.com"><a class="c-button c-button--email u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="email" href=
"mailto:john.doe@example.com" target="_top" aria-label="Email" data-uid="6a94c4d4882c3" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Email</span></span></a></span>
<span data-tooltip="+46 123 456 789"><a class="c-button u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="telephone" href="tel:+46123456789" target="_top"
aria-label="Call" data-uid="6a94c4d48837c" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Call</span></span></a></span> <a class=
"c-button c-button--some c-button--linkedin u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="linkedin" title=
"LinkedIn" aria-label="linkedin" href="https://www.linkedin.com/in/johndoe" target="_top" data-uid="6a94c4d488416" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d488449"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z"
fill-rule="evenodd"></path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--twitter u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="twitter" title="Twitter"
aria-label="twitter" href="https://twitter.com/johndoe" target="_top" data-uid="6a94c4d4884ce" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d488504"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z">
</path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--facebook u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="facebook" title=
"Facebook" aria-label="facebook" href="https://www.facebook.com/johndoe" target="_top" data-uid="6a94c4d48856e" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d4885a3"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z">
</path></svg></span></span></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid-12@xs o-grid-6@md o-grid-4@lg">
<div class="c-person c-person--extended" data-component="person">
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="itemscope" itemtype="http://schema.org/Person" data-uid="6a94c4d4891a7" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a94c4d488e39" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a94c4d4886d1" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a94c4d488704" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a94c4d488734" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://i.pravatar.cc/144?img=4" alt="John Doe" />
</div>
</figure>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="6a94c4d488b4c" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a94c4d488b8b" data-component="typography">Web Developer, IT Department</span>
</div>
</div>
</div><!-- typography.blade.php original: div -->
<div class="c-typography u-margin__x--2 u-margin__bottom--1 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d488bb7" data-component="typography">
John is a skilled web developer with over 10 years of experience in creating dynamic and responsive websites. He specializes in front-end development and has a passion for crafting
user-friendly interfaces.
</div>
<div class="c-accordion c-accordion" style="--c-accordion--heading-count: 1;" id="id_6a94c4d488e04" data-uid="6a94c4d488e0a" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d488c13" data-uid="6a94c4d488c1d" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d488caa" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d488c49" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d488cd0" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" translate="no" data-uid="6a94c4d488bef" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</details>
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d488d2a" data-uid="6a94c4d488d33" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d488db8" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d488d5e" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d488ddc" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d488d09" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</details>
</div>
</div>
<div class="c-card__footer u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1" data-uid="6a94c4d48915c" data-component="card__footer">
<span data-tooltip="john.doe@example.com"><a class="c-button c-button--email u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="email" href=
"mailto:john.doe@example.com" target="_top" aria-label="Email" data-uid="6a94c4d488e7c" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Email</span></span></a></span>
<span data-tooltip="+46 123 456 789"><a class="c-button u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="telephone" href="tel:+46123456789" target="_top"
aria-label="Call" data-uid="6a94c4d488f1f" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Call</span></span></a></span> <a class=
"c-button c-button--some c-button--linkedin u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="linkedin" title=
"LinkedIn" aria-label="linkedin" href="https://www.linkedin.com/in/johndoe" target="_top" data-uid="6a94c4d488fb5" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d488fe7"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z"
fill-rule="evenodd"></path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--twitter u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="twitter" title="Twitter"
aria-label="twitter" href="https://twitter.com/johndoe" target="_top" data-uid="6a94c4d489049" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d48907a"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z">
</path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--facebook u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="facebook" title=
"Facebook" aria-label="facebook" href="https://www.facebook.com/johndoe" target="_top" data-uid="6a94c4d4890da" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d48910b"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z">
</path></svg></span></span></span></a>
</div>
</div>
</div>
</div>
</div>
<div class="o-grid-12@xs o-grid-6@md o-grid-4@lg">
<div class="c-person c-person--extended" data-component="person">
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="itemscope" itemtype="http://schema.org/Person" data-uid="6a94c4d4899c8" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a94c4d48963d" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a94c4d489230" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a94c4d489260" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a94c4d48928e" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://i.pravatar.cc/144?img=5" alt="John Doe" />
</div>
</figure>
</div>
<div class="c-signature__author-box">
<div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__author c-typography__variant--subtitle" data-uid="6a94c4d4892f6" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a94c4d48932b" data-component="typography">Web Developer, IT Department</span>
</div>
</div>
</div><!-- typography.blade.php original: div -->
<div class="c-typography u-margin__x--2 u-margin__bottom--1 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d48935a" data-component="typography">
John is a skilled web developer with over 10 years of experience in creating dynamic and responsive websites. He specializes in front-end development and has a passion for crafting
user-friendly interfaces.
</div>
<div class="c-accordion c-accordion" style="--c-accordion--heading-count: 1;" id="id_6a94c4d489604" data-uid="6a94c4d48960a" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d4893bc" data-uid="6a94c4d4893c7" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d48946f" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d4893f8" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d4894a5" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" translate="no" data-uid="6a94c4d489396" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</details>
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a94c4d48950a" data-uid="6a94c4d489514" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a94c4d4895ad" data-component="element">
<!-- typography.blade.php original: span -->
<span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a94c4d489546" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a94c4d4895d6" data-component="element">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="6a94c4d4894e5" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</details>
</div>
</div>
<div class="c-card__footer u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1" data-uid="6a94c4d48997c" data-component="card__footer">
<span data-tooltip="john.doe@example.com"><a class="c-button c-button--email u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="email" href=
"mailto:john.doe@example.com" target="_top" aria-label="Email" data-uid="6a94c4d489688" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Email</span></span></a></span>
<span data-tooltip="+46 123 456 789"><a class="c-button u-margin--0 c-button__basic c-button__basic--default c-button--md" itemprop="telephone" href="tel:+46123456789" target="_top"
aria-label="Call" data-uid="6a94c4d489726" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php --></span> <span class="c-button__label-text c-button__label-text--reverse">Call</span></span></a></span> <a class=
"c-button c-button--some c-button--linkedin u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="linkedin" title=
"LinkedIn" aria-label="linkedin" href="https://www.linkedin.com/in/johndoe" target="_top" data-uid="6a94c4d4897c4" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d4897f6"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z"
fill-rule="evenodd"></path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--twitter u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="twitter" title="Twitter"
aria-label="twitter" href="https://twitter.com/johndoe" target="_top" data-uid="6a94c4d489859" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d48988c"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z">
</path></svg></span></span></span></a> <a class=
"c-button c-button--some c-button--facebook u-margin--0 u-color__text--black c-button__basic c-button__basic--default c-button--md c-button--icon-only" itemprop="facebook" title=
"Facebook" aria-label="facebook" href="https://www.facebook.com/johndoe" target="_top" data-uid="6a94c4d4898f0" data-component="button"><span class="c-button__label"><span class=
"c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
<span class="c-icon c-icon--svg-path c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a94c4d489935"
data-component="icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d=
"M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z">
</path></svg></span></span></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
