Copy environment

Person Card

<div class="person-card">
    <div class="person-card__figure">
        <div class="image image--background person-card__image person-card__image--workmode">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
            </div>
        </div>
        <div class="image image--background person-card__image person-card__image--playmode">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
            </div>
        </div>
    </div>
    <div class="person-card__content">
        <h3 class="person-card__name">Sander Orav</h3>
        <div class="person-card__position">Front-end</div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "workmodeImage": {
      "alt": "Team member workmode",
      "src": "//placehold.it/360x420?text=workmode",
      "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w"
    },
    "playmodeImage": {
      "alt": "Team member playmode",
      "src": "//placehold.it/360x420?text=playmode",
      "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w"
    },
    "name": "Sander Orav",
    "position": "Front-end"
  }
}

Playmode

<div class="person-card is-in-playmode">
    <div class="person-card__figure">
        <div class="image image--background person-card__image person-card__image--workmode">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" data-sizes="auto" alt="Team member workmode" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/360x420?text=workmode" srcset="//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w" sizes="100vw" alt="Team member workmode" class="image__img">
            </noscript>
            </div>
        </div>
        <div class="image image--background person-card__image person-card__image--playmode">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" data-sizes="auto" alt="Team member playmode" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/360x420?text=playmode" srcset="//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w" sizes="100vw" alt="Team member playmode" class="image__img">
            </noscript>
            </div>
        </div>
    </div>
    <div class="person-card__content">
        <h3 class="person-card__name">Sander Orav</h3>
        <div class="person-card__position">Front-end</div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "workmodeImage": {
      "alt": "Team member workmode",
      "src": "//placehold.it/360x420?text=workmode",
      "srcset": "//placehold.it/360x420?text=workmode 360w, //placehold.it/720x840?text=workmode 720w"
    },
    "playmodeImage": {
      "alt": "Team member playmode",
      "src": "//placehold.it/360x420?text=playmode",
      "srcset": "//placehold.it/360x420?text=playmode 360w, //placehold.it/720x840?text=playmode 720w"
    },
    "name": "Sander Orav",
    "position": "Front-end"
  },
  "modifier": "is-in-playmode"
}
  • Handle: @person-card--playmode
  • Tags:
  • Variants (2): default, playmode
  • Preview:
  • Filesystem Path: src/patterns/components/person-card/person-card.twig
  • References (1): @image