Person
The Person component provides a reusable pattern for displaying person information in the interface.
Person: Basic
John Doe
Web Developer, IT Department
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.
Address
123 Main Street, 12345 City, Country
Visiting address
456 Another Street, 54321 City, Country
John Doe
Web Developer, IT Department
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.
Address
123 Main Street, 12345 City, Country
Visiting address
456 Another Street, 54321 City, Country
John Doe
Web Developer, IT Department
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.
Address
123 Main Street, 12345 City, Country
Visiting address
456 Another Street, 54321 City, Country
John Doe
Web Developer, IT Department
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.
Address
123 Main Street, 12345 City, Country
Visiting address
456 Another Street, 54321 City, Country
John Doe
Web Developer, IT Department
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.
Address
123 Main Street, 12345 City, Country
Visiting address
456 Another Street, 54321 City, Country
John Doe
Web Developer, IT Department
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.
Address
123 Main Street, 12345 City, Country
Visiting address
456 Another Street, 54321 City, Country
<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">
<!-- 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-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://i.pravatar.cc/144?img=0" alt="John Doe" loading="lazy" />
</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-component="typography">John Doe</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" 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-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_6aca2ea81526a" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6aca2ea814a28" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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_6aca2ea814edc" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Visiting address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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-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-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--outgoing-mail c-icon--material c-icon--material-outgoing_mail c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor"
style="fill:var(--icon-color, currentColor)">
<path d=
"M720 800 664 744 727 680H560V600H727L664 536L720 480L880 640ZM160 680Q127 680 103.5 656.5Q80 633 80 600V200Q80 167 103.5 143.5Q127 120 160 120H680Q713 120 736.5 143.5Q760 167 760 200V404Q750 402 740.0 401.0Q730 400 720 400Q710 400 700.0 400.5Q690 401 680 403V256L416 440L160 257V600Q160 600 160.0 600.0Q160 600 160 600H483Q481 610 480.5 620.0Q480 630 480 640Q480 650 481.0 660.0Q482 670 484 680ZM218 200 416 342 620 200ZM160 600Q160 518 160.0 460.5Q160 403 160 403V256Q160 242 160.0 228.0Q160 214 160 200Q160 214 160.0 228.5Q160 243 160 257V600Q160 600 160.0 600.0Q160 600 160 600Z">
</path></svg></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-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--call c-icon--material c-icon--material-call c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M798 840Q673 840 551.0 785.5Q429 731 329 631Q229 531 174.5 409.0Q120 287 120 162Q120 144 132.0 132.0Q144 120 162 120H324Q338 120 349.0 129.5Q360 139 362 152L388 292Q390 308 387.0 319.0Q384 330 376 338L279 436Q299 473 326.5 507.5Q354 542 387 574Q418 605 452.0 631.5Q486 658 524 680L618 586Q627 577 641.5 572.5Q656 568 670 570L808 598Q822 602 831.0 612.5Q840 623 840 636V798Q840 816 828.0 828.0Q816 840 798 840ZM241 360 307 294Q307 294 307.0 294.0Q307 294 307 294L290 200Q290 200 290.0 200.0Q290 200 290 200H201Q201 200 201.0 200.0Q201 200 201 200Q206 241 215.0 281.0Q224 321 241 360ZM599 718Q638 735 678.5 745.0Q719 755 760 758Q760 758 760.0 758.0Q760 758 760 758V670Q760 670 760.0 670.0Q760 670 760 670L666 651Q666 651 666.0 651.0Q666 651 666 651ZM241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360ZM599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Z">
</path></svg></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-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-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-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-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-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-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">
<!-- 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-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://i.pravatar.cc/144?img=1" alt="John Doe" loading="lazy" />
</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-component="typography">John Doe</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" 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-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_6aca2ea81700d" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6aca2ea816a57" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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_6aca2ea816d31" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Visiting address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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-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-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--outgoing-mail c-icon--material c-icon--material-outgoing_mail c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor"
style="fill:var(--icon-color, currentColor)">
<path d=
"M720 800 664 744 727 680H560V600H727L664 536L720 480L880 640ZM160 680Q127 680 103.5 656.5Q80 633 80 600V200Q80 167 103.5 143.5Q127 120 160 120H680Q713 120 736.5 143.5Q760 167 760 200V404Q750 402 740.0 401.0Q730 400 720 400Q710 400 700.0 400.5Q690 401 680 403V256L416 440L160 257V600Q160 600 160.0 600.0Q160 600 160 600H483Q481 610 480.5 620.0Q480 630 480 640Q480 650 481.0 660.0Q482 670 484 680ZM218 200 416 342 620 200ZM160 600Q160 518 160.0 460.5Q160 403 160 403V256Q160 242 160.0 228.0Q160 214 160 200Q160 214 160.0 228.5Q160 243 160 257V600Q160 600 160.0 600.0Q160 600 160 600Z">
</path></svg></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-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--call c-icon--material c-icon--material-call c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M798 840Q673 840 551.0 785.5Q429 731 329 631Q229 531 174.5 409.0Q120 287 120 162Q120 144 132.0 132.0Q144 120 162 120H324Q338 120 349.0 129.5Q360 139 362 152L388 292Q390 308 387.0 319.0Q384 330 376 338L279 436Q299 473 326.5 507.5Q354 542 387 574Q418 605 452.0 631.5Q486 658 524 680L618 586Q627 577 641.5 572.5Q656 568 670 570L808 598Q822 602 831.0 612.5Q840 623 840 636V798Q840 816 828.0 828.0Q816 840 798 840ZM241 360 307 294Q307 294 307.0 294.0Q307 294 307 294L290 200Q290 200 290.0 200.0Q290 200 290 200H201Q201 200 201.0 200.0Q201 200 201 200Q206 241 215.0 281.0Q224 321 241 360ZM599 718Q638 735 678.5 745.0Q719 755 760 758Q760 758 760.0 758.0Q760 758 760 758V670Q760 670 760.0 670.0Q760 670 760 670L666 651Q666 651 666.0 651.0Q666 651 666 651ZM241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360ZM599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Z">
</path></svg></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-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-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-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-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-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-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">
<!-- 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-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://i.pravatar.cc/144?img=2" alt="John Doe" loading="lazy" />
</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-component="typography">John Doe</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" 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-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_6aca2ea818b89" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6aca2ea8185d1" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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_6aca2ea81890f" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Visiting address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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-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-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--outgoing-mail c-icon--material c-icon--material-outgoing_mail c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor"
style="fill:var(--icon-color, currentColor)">
<path d=
"M720 800 664 744 727 680H560V600H727L664 536L720 480L880 640ZM160 680Q127 680 103.5 656.5Q80 633 80 600V200Q80 167 103.5 143.5Q127 120 160 120H680Q713 120 736.5 143.5Q760 167 760 200V404Q750 402 740.0 401.0Q730 400 720 400Q710 400 700.0 400.5Q690 401 680 403V256L416 440L160 257V600Q160 600 160.0 600.0Q160 600 160 600H483Q481 610 480.5 620.0Q480 630 480 640Q480 650 481.0 660.0Q482 670 484 680ZM218 200 416 342 620 200ZM160 600Q160 518 160.0 460.5Q160 403 160 403V256Q160 242 160.0 228.0Q160 214 160 200Q160 214 160.0 228.5Q160 243 160 257V600Q160 600 160.0 600.0Q160 600 160 600Z">
</path></svg></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-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--call c-icon--material c-icon--material-call c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M798 840Q673 840 551.0 785.5Q429 731 329 631Q229 531 174.5 409.0Q120 287 120 162Q120 144 132.0 132.0Q144 120 162 120H324Q338 120 349.0 129.5Q360 139 362 152L388 292Q390 308 387.0 319.0Q384 330 376 338L279 436Q299 473 326.5 507.5Q354 542 387 574Q418 605 452.0 631.5Q486 658 524 680L618 586Q627 577 641.5 572.5Q656 568 670 570L808 598Q822 602 831.0 612.5Q840 623 840 636V798Q840 816 828.0 828.0Q816 840 798 840ZM241 360 307 294Q307 294 307.0 294.0Q307 294 307 294L290 200Q290 200 290.0 200.0Q290 200 290 200H201Q201 200 201.0 200.0Q201 200 201 200Q206 241 215.0 281.0Q224 321 241 360ZM599 718Q638 735 678.5 745.0Q719 755 760 758Q760 758 760.0 758.0Q760 758 760 758V670Q760 670 760.0 670.0Q760 670 760 670L666 651Q666 651 666.0 651.0Q666 651 666 651ZM241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360ZM599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Z">
</path></svg></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-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-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-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-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-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-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">
<!-- 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-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://i.pravatar.cc/144?img=3" alt="John Doe" loading="lazy" />
</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-component="typography">John Doe</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" 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-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_6aca2ea81a607" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6aca2ea81a022" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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_6aca2ea81a309" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Visiting address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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-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-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--outgoing-mail c-icon--material c-icon--material-outgoing_mail c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor"
style="fill:var(--icon-color, currentColor)">
<path d=
"M720 800 664 744 727 680H560V600H727L664 536L720 480L880 640ZM160 680Q127 680 103.5 656.5Q80 633 80 600V200Q80 167 103.5 143.5Q127 120 160 120H680Q713 120 736.5 143.5Q760 167 760 200V404Q750 402 740.0 401.0Q730 400 720 400Q710 400 700.0 400.5Q690 401 680 403V256L416 440L160 257V600Q160 600 160.0 600.0Q160 600 160 600H483Q481 610 480.5 620.0Q480 630 480 640Q480 650 481.0 660.0Q482 670 484 680ZM218 200 416 342 620 200ZM160 600Q160 518 160.0 460.5Q160 403 160 403V256Q160 242 160.0 228.0Q160 214 160 200Q160 214 160.0 228.5Q160 243 160 257V600Q160 600 160.0 600.0Q160 600 160 600Z">
</path></svg></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-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--call c-icon--material c-icon--material-call c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M798 840Q673 840 551.0 785.5Q429 731 329 631Q229 531 174.5 409.0Q120 287 120 162Q120 144 132.0 132.0Q144 120 162 120H324Q338 120 349.0 129.5Q360 139 362 152L388 292Q390 308 387.0 319.0Q384 330 376 338L279 436Q299 473 326.5 507.5Q354 542 387 574Q418 605 452.0 631.5Q486 658 524 680L618 586Q627 577 641.5 572.5Q656 568 670 570L808 598Q822 602 831.0 612.5Q840 623 840 636V798Q840 816 828.0 828.0Q816 840 798 840ZM241 360 307 294Q307 294 307.0 294.0Q307 294 307 294L290 200Q290 200 290.0 200.0Q290 200 290 200H201Q201 200 201.0 200.0Q201 200 201 200Q206 241 215.0 281.0Q224 321 241 360ZM599 718Q638 735 678.5 745.0Q719 755 760 758Q760 758 760.0 758.0Q760 758 760 758V670Q760 670 760.0 670.0Q760 670 760 670L666 651Q666 651 666.0 651.0Q666 651 666 651ZM241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360ZM599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Z">
</path></svg></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-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-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-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-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-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-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">
<!-- 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-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://i.pravatar.cc/144?img=4" alt="John Doe" loading="lazy" />
</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-component="typography">John Doe</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" 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-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_6aca2ea8220f8" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6aca2ea821b11" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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_6aca2ea821e0a" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Visiting address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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-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-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--outgoing-mail c-icon--material c-icon--material-outgoing_mail c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor"
style="fill:var(--icon-color, currentColor)">
<path d=
"M720 800 664 744 727 680H560V600H727L664 536L720 480L880 640ZM160 680Q127 680 103.5 656.5Q80 633 80 600V200Q80 167 103.5 143.5Q127 120 160 120H680Q713 120 736.5 143.5Q760 167 760 200V404Q750 402 740.0 401.0Q730 400 720 400Q710 400 700.0 400.5Q690 401 680 403V256L416 440L160 257V600Q160 600 160.0 600.0Q160 600 160 600H483Q481 610 480.5 620.0Q480 630 480 640Q480 650 481.0 660.0Q482 670 484 680ZM218 200 416 342 620 200ZM160 600Q160 518 160.0 460.5Q160 403 160 403V256Q160 242 160.0 228.0Q160 214 160 200Q160 214 160.0 228.5Q160 243 160 257V600Q160 600 160.0 600.0Q160 600 160 600Z">
</path></svg></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-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--call c-icon--material c-icon--material-call c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M798 840Q673 840 551.0 785.5Q429 731 329 631Q229 531 174.5 409.0Q120 287 120 162Q120 144 132.0 132.0Q144 120 162 120H324Q338 120 349.0 129.5Q360 139 362 152L388 292Q390 308 387.0 319.0Q384 330 376 338L279 436Q299 473 326.5 507.5Q354 542 387 574Q418 605 452.0 631.5Q486 658 524 680L618 586Q627 577 641.5 572.5Q656 568 670 570L808 598Q822 602 831.0 612.5Q840 623 840 636V798Q840 816 828.0 828.0Q816 840 798 840ZM241 360 307 294Q307 294 307.0 294.0Q307 294 307 294L290 200Q290 200 290.0 200.0Q290 200 290 200H201Q201 200 201.0 200.0Q201 200 201 200Q206 241 215.0 281.0Q224 321 241 360ZM599 718Q638 735 678.5 745.0Q719 755 760 758Q760 758 760.0 758.0Q760 758 760 758V670Q760 670 760.0 670.0Q760 670 760 670L666 651Q666 651 666.0 651.0Q666 651 666 651ZM241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360ZM599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Z">
</path></svg></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-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-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-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-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-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-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">
<!-- 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-component="card">
<div class="c-card__paint-container">
<div class="c-card__body u-padding--0" data-component="card__body">
<div class="c-signature u-margin--2 c-signature--space-0" data-component="signature">
<!-- avatar.blade.php -->
<div class="c-avatar c-signature__avatar c-avatar--size-md" data-component="avatar">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="John Doe" data-component="image">
<div class="c-image__image-wrapper">
<img class="c-image__image" src="https://i.pravatar.cc/144?img=5" alt="John Doe" loading="lazy" />
</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-component="typography">John Doe</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-signature__title c-typography__variant--byline" 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-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_6aca2ea823c8a" data-component="accordion">
<details class="c-accordion__item c-accordion__item" itemprop="address" style="--c-accordion__item--heading-count: 1;" id="id_6aca2ea8236d9" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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_6aca2ea8239b0" data-component="accordion__item">
<summary class="c-element c-accordion__item__heading" 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-component="typography">Visiting address</span>
<!-- icon.blade.php -->
<span class="c-icon c-accordion__item__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down c-icon--svg-material c-icon--size-md" role="img"
data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 960 960" fill="currentcolor" style="fill:var(--icon-color, currentColor)">
<path d="M480 616 240 376 296 320 480 504 664 320 720 376Z"></path></svg></span>
</summary>
<div class="c-element c-accordion__item__content" 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-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-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-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--outgoing-mail c-icon--material c-icon--material-outgoing_mail c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor"
style="fill:var(--icon-color, currentColor)">
<path d=
"M720 800 664 744 727 680H560V600H727L664 536L720 480L880 640ZM160 680Q127 680 103.5 656.5Q80 633 80 600V200Q80 167 103.5 143.5Q127 120 160 120H680Q713 120 736.5 143.5Q760 167 760 200V404Q750 402 740.0 401.0Q730 400 720 400Q710 400 700.0 400.5Q690 401 680 403V256L416 440L160 257V600Q160 600 160.0 600.0Q160 600 160 600H483Q481 610 480.5 620.0Q480 630 480 640Q480 650 481.0 660.0Q482 670 484 680ZM218 200 416 342 620 200ZM160 600Q160 518 160.0 460.5Q160 403 160 403V256Q160 242 160.0 228.0Q160 214 160 200Q160 214 160.0 228.5Q160 243 160 257V600Q160 600 160.0 600.0Q160 600 160 600Z">
</path></svg></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-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--call c-icon--material c-icon--material-call c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d=
"M798 840Q673 840 551.0 785.5Q429 731 329 631Q229 531 174.5 409.0Q120 287 120 162Q120 144 132.0 132.0Q144 120 162 120H324Q338 120 349.0 129.5Q360 139 362 152L388 292Q390 308 387.0 319.0Q384 330 376 338L279 436Q299 473 326.5 507.5Q354 542 387 574Q418 605 452.0 631.5Q486 658 524 680L618 586Q627 577 641.5 572.5Q656 568 670 570L808 598Q822 602 831.0 612.5Q840 623 840 636V798Q840 816 828.0 828.0Q816 840 798 840ZM241 360 307 294Q307 294 307.0 294.0Q307 294 307 294L290 200Q290 200 290.0 200.0Q290 200 290 200H201Q201 200 201.0 200.0Q201 200 201 200Q206 241 215.0 281.0Q224 321 241 360ZM599 718Q638 735 678.5 745.0Q719 755 760 758Q760 758 760.0 758.0Q760 758 760 758V670Q760 670 760.0 670.0Q760 670 760 670L666 651Q666 651 666.0 651.0Q666 651 666 651ZM241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360Q241 360 241.0 360.0Q241 360 241 360ZM599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Q599 718 599.0 718.0Q599 718 599 718Z">
</path></svg></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-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-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-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-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-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-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>
<div class="o-grid">
@for($index = 0; $index < 6; $index++)
<div class="o-grid-12@xs o-grid-6@md o-grid-4@lg">
@person([
"givenName" => "John",
"familyName" => "Doe",
"jobTitle" => "Web Developer",
"description" => "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.",
"administrationUnit" => "IT Department",
"image" => "https://i.pravatar.cc/144?img={$index}",
"socialMedia" => [
[
"url" => "https://www.linkedin.com/in/johndoe",
"media" => "linkedin",
"label" => "LinkedIn"
],
[
"url" => "https://twitter.com/johndoe",
"media" => "twitter",
"label" => "Twitter"
],
[
"url" => "https://www.facebook.com/johndoe",
"media" => "facebook",
"label" => "Facebook"
]
],
"email" => "john.doe@example.com",
"telephone" => [[
"number" => "+46 123 456 789"
]],
"address" => "123 Main Street, 12345 City, Country",
"visitingAddress" => "456 Another Street, 54321 City, Country",
])
@endperson
</div>
@endfor
</div>API
| Parameter | Default | Type | Description |
|---|---|---|---|
|
givenName
|
string | - | |
|
familyName
|
false | string|boolean | - |
|
jobTitle
|
false | string|boolean | - |
|
email
|
false | string|boolean | - |
|
telephone
|
[] | array | - |
|
address
|
false | string|boolean | - |
|
visitingAddress
|
false | string|boolean | - |
|
description
|
false | string|boolean | - |
|
image
|
false | string|integer|boolean | - |
|
administrationUnit
|
false | string|boolean | - |
|
socialMedia
|
[] | array | - |
|
customSections
|
[] | array | - |
|
useAvatarFallback
|
true | boolean | - |
|
view
|
extended | string | - |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-person--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |
|
--c-person--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |