<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-uid="69f0d15a10d71" data-component="person"}>
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="" itemtype="http://schema.org/Person" data-uid="69f0d15a13ec3" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="69f0d15a118be" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d15a11c68" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="69f0d15a11cee" 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="69f0d15a11de1" data-component="typography">
John Doe
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d15a11e23" 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="69f0d15a11e63" 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>
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_69f0d15a12d17" data-uid="69f0d15a12d21" data-component="accordion">
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a12421" data-uid="69f0d15a12431" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a12421" aria-expanded="false" js-expand-button href="#id_69f0d15a12421">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h2 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a124c8" data-component="typography">
Address
</h2>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a12654" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a12421" aria-hidden="true">
<!-- 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="69f0d15a121d4" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</div>
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a12a14" data-uid="69f0d15a12a1e" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a12a14" aria-expanded="false" js-expand-button href="#id_69f0d15a12a14">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a12a7b" data-component="typography">
Visiting address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a12ad3" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a12a14" aria-hidden="true">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="69f0d15a129cf" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</div>
</div>
</div>
<div class="u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1">
<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="69f0d15a130df" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--outgoing-mail c-icon--material c-icon--material-outgoing_mail material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="outgoing_mail" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a13132" data-component="icon">
</span>
</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="69f0d15a134c6" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--call c-icon--material c-icon--material-call material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="call" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a13520" data-component="icon">
</span>
</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="69f0d15a138f2" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a1393d" 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="69f0d15a13cb6" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a13cfb" 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="69f0d15a13dc3" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a13e06" 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-uid="69f0d15a13f25" data-component="person"}>
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="" itemtype="http://schema.org/Person" data-uid="69f0d15a14952" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="69f0d15a1400c" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d15a1404d" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="69f0d15a14089" 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="69f0d15a1410e" data-component="typography">
John Doe
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d15a14142" 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="69f0d15a14175" 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>
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_69f0d15a14462" data-uid="69f0d15a1446b" data-component="accordion">
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a1421b" data-uid="69f0d15a14224" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a1421b" aria-expanded="false" js-expand-button href="#id_69f0d15a1421b">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a14280" data-component="typography">
Address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a142c0" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a1421b" aria-hidden="true">
<!-- 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="69f0d15a141e9" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</div>
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a14374" data-uid="69f0d15a1437c" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a14374" aria-expanded="false" js-expand-button href="#id_69f0d15a14374">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a143db" data-component="typography">
Visiting address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a1441c" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a14374" aria-hidden="true">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="69f0d15a14345" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</div>
</div>
</div>
<div class="u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1">
<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="69f0d15a144f3" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--outgoing-mail c-icon--material c-icon--material-outgoing_mail material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="outgoing_mail" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a14536" data-component="icon">
</span>
</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="69f0d15a145ce" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--call c-icon--material c-icon--material-call material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="call" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a14621" data-component="icon">
</span>
</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="69f0d15a146c0" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a14707" 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="69f0d15a147b0" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a1480b" 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="69f0d15a148ae" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a148e8" 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-uid="69f0d15a149a5" data-component="person"}>
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="" itemtype="http://schema.org/Person" data-uid="69f0d15a225d0" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="69f0d15a14a8a" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d15a14ac7" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="69f0d15a14aff" 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="69f0d15a14b7c" data-component="typography">
John Doe
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d15a14baf" 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="69f0d15a14be2" 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>
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_69f0d15a21f0d" data-uid="69f0d15a21f19" data-component="accordion">
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a14c83" data-uid="69f0d15a14c8c" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a14c83" aria-expanded="false" js-expand-button href="#id_69f0d15a14c83">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a14cd8" data-component="typography">
Address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a14d16" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a14c83" aria-hidden="true">
<!-- 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="69f0d15a14c53" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</div>
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a14dc5" data-uid="69f0d15a14dcd" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a14dc5" aria-expanded="false" js-expand-button href="#id_69f0d15a14dc5">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a21e3b" data-component="typography">
Visiting address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a21eaa" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a14dc5" aria-hidden="true">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="69f0d15a14d97" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</div>
</div>
</div>
<div class="u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1">
<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="69f0d15a21fe1" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--outgoing-mail c-icon--material c-icon--material-outgoing_mail material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="outgoing_mail" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a2202d" data-component="icon">
</span>
</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="69f0d15a2218a" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--call c-icon--material c-icon--material-call material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="call" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a2221c" data-component="icon">
</span>
</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="69f0d15a222f6" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a22340" 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="69f0d15a2240c" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a22450" 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="69f0d15a22510" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a22554" 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-uid="69f0d15a2263f" data-component="person"}>
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="" itemtype="http://schema.org/Person" data-uid="69f0d15a230d8" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="69f0d15a22737" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d15a2277f" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="69f0d15a227c2" 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="69f0d15a22856" data-component="typography">
John Doe
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d15a2288e" 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="69f0d15a228d8" 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>
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_69f0d15a22bd6" data-uid="69f0d15a22bde" data-component="accordion">
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a2298f" data-uid="69f0d15a22999" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a2298f" aria-expanded="false" js-expand-button href="#id_69f0d15a2298f">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a229f0" data-component="typography">
Address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a22a34" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a2298f" aria-hidden="true">
<!-- 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="69f0d15a22957" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</div>
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a22af5" data-uid="69f0d15a22afe" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a22af5" aria-expanded="false" js-expand-button href="#id_69f0d15a22af5">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a22b4e" data-component="typography">
Visiting address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a22b90" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a22af5" aria-hidden="true">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="69f0d15a22ac1" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</div>
</div>
</div>
<div class="u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1">
<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="69f0d15a22c6a" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--outgoing-mail c-icon--material c-icon--material-outgoing_mail material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="outgoing_mail" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a22cba" data-component="icon">
</span>
</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="69f0d15a22d57" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--call c-icon--material c-icon--material-call material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="call" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a22d9b" data-component="icon">
</span>
</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="69f0d15a22e37" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a22e78" 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="69f0d15a22f2c" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a22f6b" 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="69f0d15a23019" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a23057" 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-uid="69f0d15a23134" data-component="person"}>
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="" itemtype="http://schema.org/Person" data-uid="69f0d15a23b56" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="69f0d15a23217" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d15a23257" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="69f0d15a23290" 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="69f0d15a23314" data-component="typography">
John Doe
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d15a2334b" 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="69f0d15a23382" 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>
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_69f0d15a23675" data-uid="69f0d15a2367d" data-component="accordion">
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a2342e" data-uid="69f0d15a23437" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a2342e" aria-expanded="false" js-expand-button href="#id_69f0d15a2342e">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a23493" data-component="typography">
Address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a234d9" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a2342e" aria-hidden="true">
<!-- 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="69f0d15a233fa" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</div>
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a23596" data-uid="69f0d15a2359f" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a23596" aria-expanded="false" js-expand-button href="#id_69f0d15a23596">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a235ee" data-component="typography">
Visiting address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a23630" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a23596" aria-hidden="true">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="69f0d15a23563" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</div>
</div>
</div>
<div class="u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1">
<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="69f0d15a23705" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--outgoing-mail c-icon--material c-icon--material-outgoing_mail material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="outgoing_mail" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a23748" data-component="icon">
</span>
</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="69f0d15a237de" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--call c-icon--material c-icon--material-call material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="call" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a2381e" data-component="icon">
</span>
</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="69f0d15a238c4" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a23905" 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="69f0d15a239ba" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a239fa" 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="69f0d15a23aa9" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a23aef" 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-uid="69f0d15a23ba8" data-component="person"}>
<!-- card.blade.php -->
<div class="c-card u-height--100 c-card--contact c-card--ratio-16-9" itemscope="" itemtype="http://schema.org/Person" data-uid="69f0d15a2451e" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="69f0d15a23c87" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="69f0d15a23cc2" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="69f0d15a23cf6" 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="69f0d15a23d6f" data-component="typography">
John Doe
</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="69f0d15a23da2" 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="69f0d15a23dd5" 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>
<!-- accordion.blade.php -->
<div class="c-accordion" js-expand-container id="id_69f0d15a24098" data-uid="69f0d15a2409f" data-component="accordion">
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a23e77" data-uid="69f0d15a23e80" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a23e77" aria-expanded="false" js-expand-button href="#id_69f0d15a23e77">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a23ece" data-component="typography">
Address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a23f0e" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a23e77" aria-hidden="true">
<!-- 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="69f0d15a23e46" data-component="typography">
123 Main Street, 12345 City, Country
</p>
</div>
</div>
<div class="c-accordion c-accordion__section" itemprop="address" id="id_69f0d15a23fbf" data-uid="69f0d15a23fc6" data-component="accordion__item"">
<a class="c-accordion__button" aria-label="" aria-controls="c-accordion__aria-id_69f0d15a23fbf" aria-expanded="false" js-expand-button href="#id_69f0d15a23fbf">
<div class="c-accordion__button-wrapper " tabindex="-1">
<!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-accordion__button-column c-typography__variant--h4" data-uid="69f0d15a24019" data-component="typography">
Visiting address
</h3>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__icon c-accordion__icon--keyboard_arrow_down c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15a24057" data-component="icon">
</span>
</div>
</a>
<div class="c-accordion__content" id="c-accordion__aria-id_69f0d15a23fbf" aria-hidden="true">
<!-- typography.blade.php original: p -->
<p class="c-typography u-margin__top--0 u-color__text--darker c-typography__variant--meta" data-uid="69f0d15a23f90" data-component="typography">
456 Another Street, 54321 City, Country
</p>
</div>
</div>
</div>
</div>
<div class="u-border__top--1 u-margin__top--auto u-padding__x--2 u-display--flex u-gap--1">
<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="69f0d15a2411e" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--outgoing-mail c-icon--material c-icon--material-outgoing_mail material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="outgoing_mail" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a2415c" data-component="icon">
</span>
</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="69f0d15a241e8" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon c-button__label-icon--reverse">
<!-- icon.blade.php -->
<span class="c-icon c-icon--call c-icon--material c-icon--material-call material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="call" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15a24224" data-component="icon">
</span>
</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="69f0d15a242b3" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a242ee" 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="69f0d15a24394" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a243cf" 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="69f0d15a2447c" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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="69f0d15a244b8" 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>
