<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="6a5f6fd2d3b9c" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a5f6fd2d2a1c" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a5f6fd2d17e6" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a5f6fd2d1b16" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a5f6fd2d1bb8" 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="6a5f6fd2d1d03" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a5f6fd2d1d5b" 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="6a5f6fd2d1db1" 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_6a5f6fd2d2983" data-uid="6a5f6fd2d298c" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a5f6fd2d212a" data-uid="6a5f6fd2d213d" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2d2415" 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="6a5f6fd2d219f" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2d2472" 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="6a5f6fd2d209a" 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_6a5f6fd2d276c" data-uid="6a5f6fd2d277b" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2d28a9" 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="6a5f6fd2d27d0" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2d28f3" 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="6a5f6fd2d271f" 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="6a5f6fd2d3ae3" 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="6a5f6fd2d2d80" 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="6a5f6fd2d30e5" 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="6a5f6fd2d34a9" 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="6a5f6fd2d3501"
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="6a5f6fd2d38cc" 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="6a5f6fd2d3921"
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="6a5f6fd2d39d1" 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="6a5f6fd2d3a22"
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="6a5f6fd2d4ece" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a5f6fd2d452b" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a5f6fd2d3ca6" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a5f6fd2d3cfa" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a5f6fd2d3d4c" 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="6a5f6fd2d3e1f" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a5f6fd2d3e6a" 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="6a5f6fd2d3eb5" 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_6a5f6fd2d448f" data-uid="6a5f6fd2d449d" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a5f6fd2d3f68" data-uid="6a5f6fd2d3f76" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2d4085" 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="6a5f6fd2d3fd1" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2d40f3" 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="6a5f6fd2d3f26" 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_6a5f6fd2d4205" data-uid="6a5f6fd2d421a" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2d438e" 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="6a5f6fd2d4290" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2d440e" 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="6a5f6fd2d41a1" 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="6a5f6fd2d4e14" 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="6a5f6fd2d4602" 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="6a5f6fd2d47b8" 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="6a5f6fd2d494f" 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="6a5f6fd2d49dc"
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="6a5f6fd2d4b04" 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="6a5f6fd2d4b99"
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="6a5f6fd2d4cc1" 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="6a5f6fd2d4d49"
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="6a5f6fd2e46c6" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a5f6fd2d5b76" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a5f6fd2d5053" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a5f6fd2d50d6" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a5f6fd2d5154" 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="6a5f6fd2d529a" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a5f6fd2d5316" 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="6a5f6fd2d53a3" 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_6a5f6fd2d5acf" data-uid="6a5f6fd2d5add" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a5f6fd2d54d0" data-uid="6a5f6fd2d54e5" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2d567e" 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="6a5f6fd2d5569" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2d56f2" 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="6a5f6fd2d545c" 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_6a5f6fd2d5830" data-uid="6a5f6fd2d5845" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2d59da" 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="6a5f6fd2d58c7" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2d5a4e" 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="6a5f6fd2d57c3" 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="6a5f6fd2e4643" 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="6a5f6fd2d5c51" 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="6a5f6fd2d5dd9" 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="6a5f6fd2e429d" 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="6a5f6fd2e4343"
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="6a5f6fd2e443a" 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="6a5f6fd2e449f"
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="6a5f6fd2e4558" 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="6a5f6fd2e45bf"
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="6a5f6fd2e547f" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a5f6fd2e4ee3" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a5f6fd2e47bd" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a5f6fd2e4812" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a5f6fd2e4866" 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="6a5f6fd2e4939" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a5f6fd2e4998" 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="6a5f6fd2e49e6" 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_6a5f6fd2e4e81" data-uid="6a5f6fd2e4e8a" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a5f6fd2e4aa0" data-uid="6a5f6fd2e4aaf" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2e4ba1" 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="6a5f6fd2e4aff" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2e4be5" 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="6a5f6fd2e4a5f" 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_6a5f6fd2e4c95" data-uid="6a5f6fd2e4cb3" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2e4de9" 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="6a5f6fd2e4d00" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2e4e30" 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="6a5f6fd2e4c58" 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="6a5f6fd2e540c" 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="6a5f6fd2e4f69" 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="6a5f6fd2e5057" 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="6a5f6fd2e5146" 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="6a5f6fd2e5199"
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="6a5f6fd2e5248" 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="6a5f6fd2e5298"
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="6a5f6fd2e5343" 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="6a5f6fd2e5393"
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="6a5f6fd2e6167" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a5f6fd2e5bdd" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a5f6fd2e5577" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a5f6fd2e55c1" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a5f6fd2e560a" 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="6a5f6fd2e56c4" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a5f6fd2e5707" 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="6a5f6fd2e574c" 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_6a5f6fd2e5b84" data-uid="6a5f6fd2e5b8c" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a5f6fd2e57f0" data-uid="6a5f6fd2e57fc" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2e58e0" 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="6a5f6fd2e5845" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2e5940" 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="6a5f6fd2e57b3" 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_6a5f6fd2e59fa" data-uid="6a5f6fd2e5a06" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2e5ae6" 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="6a5f6fd2e5a4e" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2e5b26" 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="6a5f6fd2e59be" 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="6a5f6fd2e60fa" 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="6a5f6fd2e5c5d" 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="6a5f6fd2e5d50" 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="6a5f6fd2e5e36" 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="6a5f6fd2e5e86"
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="6a5f6fd2e5f33" 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="6a5f6fd2e5f82"
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="6a5f6fd2e602c" 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="6a5f6fd2e607b"
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="6a5f6fd2e6e68" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-uid="6a5f6fd2e6911" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-uid="6a5f6fd2e6240" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-uid="6a5f6fd2e628d" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-uid="6a5f6fd2e62d7" 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="6a5f6fd2e6397" data-component="typography">John Doe</span>
<!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" data-uid="6a5f6fd2e63e0" 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="6a5f6fd2e642a" 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_6a5f6fd2e688c" data-uid="6a5f6fd2e68a0" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6a5f6fd2e6506" data-uid="6a5f6fd2e6515" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2e660e" 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="6a5f6fd2e6567" data-component=
"typography">Address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2e6652" 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="6a5f6fd2e6498" 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_6a5f6fd2e6702" data-uid="6a5f6fd2e670f" data-component=
"accordion__item">
<summary class="c-element c-accordion__item__heading" data-uid="6a5f6fd2e67fd" 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="6a5f6fd2e675c" data-component="typography">Visiting
address</span> <!-- icon.blade.php -->
</summary>
<div class="c-element c-accordion__item__content" data-uid="6a5f6fd2e6840" 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="6a5f6fd2e66c3" 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="6a5f6fd2e6e03" 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="6a5f6fd2e6995" 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="6a5f6fd2e6a87" 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="6a5f6fd2e6b5d" 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="6a5f6fd2e6ba8"
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="6a5f6fd2e6c4e" 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="6a5f6fd2e6ca4"
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="6a5f6fd2e6d46" 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="6a5f6fd2e6d91"
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>
