PSI Software SE Design Library

Person Data

No notes defined.

<!-- Default -->
<div class="personData">

    <div class="avatar">
        <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
    </div>

    <div class="personData-text">
        <strong class="personData-name">Leora Gulgowski</strong>
        <span class="personData-jobtitle">Direct Tactics Specialist</span>

    </div>

</div>


<!-- With Organisation -->
<div class="personData">

    <div class="avatar">
        <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
    </div>

    <div class="personData-text">
        <strong class="personData-name">Leora Gulgowski</strong>
        <span class="personData-jobtitle">Direct Tactics Specialist</span>, <span class="personData-organisation">Goldner GmbH & Co. KG</span>

    </div>

</div>


<!-- With Description -->
<div class="personData">

    <div class="avatar">
        <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
    </div>

    <div class="personData-text">
        <strong class="personData-name">Leora Gulgowski</strong>
        <span class="personData-jobtitle">Direct Tactics Specialist</span>

        <div class="personData-description">
            <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
        </div>

    </div>

</div>


<!-- With Link -->
<div class="personData">

    <div class="avatar">
        <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
    </div>

    <div class="personData-text">
        <strong class="personData-name">Leora Gulgowski</strong>
        <span class="personData-jobtitle">Direct Tactics Specialist</span>

        <a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
                <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
            </svg>
        </a>
    </div>

</div>


<!-- Complete -->
<div class="personData">

    <div class="avatar">
        <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
    </div>

    <div class="personData-text">
        <strong class="personData-name">Leora Gulgowski</strong>
        <span class="personData-jobtitle">Direct Tactics Specialist</span>, <span class="personData-organisation">Goldner GmbH & Co. KG</span>

        <div class="personData-description">
            <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
        </div>

        <a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
                <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
            </svg>
        </a>
    </div>

</div>


<!-- Large -->
<div class="personData is-large">

    <div class="avatar">
        <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
    </div>

    <div class="personData-text">
        <strong class="personData-name">Leora Gulgowski</strong>
        <span class="personData-jobtitle">Direct Tactics Specialist</span>

    </div>

</div>


<!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div style="margin-top: var(--sp-component);">
        <div class="personData">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>

            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>, <span class="personData-organisation">Goldner GmbH & Co. KG</span>

            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>

                <div class="personData-description">
                    <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
                </div>

            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>

                <a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
                        <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
                    </svg>
                </a>
            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>, <span class="personData-organisation">Goldner GmbH & Co. KG</span>

                <div class="personData-description">
                    <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
                </div>

                <a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
                        <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
                    </svg>
                </a>
            </div>

        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Large</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>.is-large</li>
            </ul>
        </div>

    </header>

    <div style="margin-top: var(--sp-component);">
        <div class="personData is-large">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>

            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData is-large">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>, <span class="personData-organisation">Goldner GmbH & Co. KG</span>

            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData is-large">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>

                <div class="personData-description">
                    <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
                </div>

            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData is-large">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>

                <a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
                        <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
                    </svg>
                </a>
            </div>

        </div>

    </div>
    <div style="margin-top: var(--sp-component);">
        <div class="personData is-large">

            <div class="avatar">
                <span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
            </div>

            <div class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>, <span class="personData-organisation">Goldner GmbH & Co. KG</span>

                <div class="personData-description">
                    <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
                </div>

                <a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
                        <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
                    </svg>
                </a>
            </div>

        </div>

    </div>

</section>


<!-- Default -->
<div class="personData{{#modifier}} {{.}}{{/modifier}}">

    {{#avatar}}
        {{render '@avatar' (contextData '@persondata' this) merge=true}}
    {{/avatar}}

    {{#image}}
        {{!-- Legacy support --}}
        <div class="personData-image" style="background-image: url({{path src}});"></div>
    {{/image}}

    <div class="personData-text">
        <strong class="personData-name">{{{name}}}</strong>
        {{#jobtitle}}<span class="personData-jobtitle">{{{.}}}</span>{{/jobtitle}}{{#organisation}}, <span class="personData-organisation">{{{.}}}</span>{{/organisation}}

        {{#description}}<div class="personData-description">{{{.}}}</div>{{/description}}

        {{#link}}<a class="personData-link" href="{{url}}"{{#target}} target="{{.}}"{{/target}}><span>{{{label}}}</span>{{#icon}}{{render '@icon' (contextData '@link' this) merge=true}}{{/icon}}</a>{{/link}}
    </div>

</div>

<!-- With Organisation -->
<div class="personData{{#modifier}} {{.}}{{/modifier}}">

    {{#avatar}}
        {{render '@avatar' (contextData '@persondata' this) merge=true}}
    {{/avatar}}

    {{#image}}
        {{!-- Legacy support --}}
        <div class="personData-image" style="background-image: url({{path src}});"></div>
    {{/image}}

    <div class="personData-text">
        <strong class="personData-name">{{{name}}}</strong>
        {{#jobtitle}}<span class="personData-jobtitle">{{{.}}}</span>{{/jobtitle}}{{#organisation}}, <span class="personData-organisation">{{{.}}}</span>{{/organisation}}

        {{#description}}<div class="personData-description">{{{.}}}</div>{{/description}}

        {{#link}}<a class="personData-link" href="{{url}}"{{#target}} target="{{.}}"{{/target}}><span>{{{label}}}</span>{{#icon}}{{render '@icon' (contextData '@link' this) merge=true}}{{/icon}}</a>{{/link}}
    </div>

</div>

<!-- With Description -->
<div class="personData{{#modifier}} {{.}}{{/modifier}}">

    {{#avatar}}
        {{render '@avatar' (contextData '@persondata' this) merge=true}}
    {{/avatar}}

    {{#image}}
        {{!-- Legacy support --}}
        <div class="personData-image" style="background-image: url({{path src}});"></div>
    {{/image}}

    <div class="personData-text">
        <strong class="personData-name">{{{name}}}</strong>
        {{#jobtitle}}<span class="personData-jobtitle">{{{.}}}</span>{{/jobtitle}}{{#organisation}}, <span class="personData-organisation">{{{.}}}</span>{{/organisation}}

        {{#description}}<div class="personData-description">{{{.}}}</div>{{/description}}

        {{#link}}<a class="personData-link" href="{{url}}"{{#target}} target="{{.}}"{{/target}}><span>{{{label}}}</span>{{#icon}}{{render '@icon' (contextData '@link' this) merge=true}}{{/icon}}</a>{{/link}}
    </div>

</div>

<!-- With Link -->
<div class="personData{{#modifier}} {{.}}{{/modifier}}">

    {{#avatar}}
        {{render '@avatar' (contextData '@persondata' this) merge=true}}
    {{/avatar}}

    {{#image}}
        {{!-- Legacy support --}}
        <div class="personData-image" style="background-image: url({{path src}});"></div>
    {{/image}}

    <div class="personData-text">
        <strong class="personData-name">{{{name}}}</strong>
        {{#jobtitle}}<span class="personData-jobtitle">{{{.}}}</span>{{/jobtitle}}{{#organisation}}, <span class="personData-organisation">{{{.}}}</span>{{/organisation}}

        {{#description}}<div class="personData-description">{{{.}}}</div>{{/description}}

        {{#link}}<a class="personData-link" href="{{url}}"{{#target}} target="{{.}}"{{/target}}><span>{{{label}}}</span>{{#icon}}{{render '@icon' (contextData '@link' this) merge=true}}{{/icon}}</a>{{/link}}
    </div>

</div>

<!-- Complete -->
<div class="personData{{#modifier}} {{.}}{{/modifier}}">

    {{#avatar}}
        {{render '@avatar' (contextData '@persondata' this) merge=true}}
    {{/avatar}}

    {{#image}}
        {{!-- Legacy support --}}
        <div class="personData-image" style="background-image: url({{path src}});"></div>
    {{/image}}

    <div class="personData-text">
        <strong class="personData-name">{{{name}}}</strong>
        {{#jobtitle}}<span class="personData-jobtitle">{{{.}}}</span>{{/jobtitle}}{{#organisation}}, <span class="personData-organisation">{{{.}}}</span>{{/organisation}}

        {{#description}}<div class="personData-description">{{{.}}}</div>{{/description}}

        {{#link}}<a class="personData-link" href="{{url}}"{{#target}} target="{{.}}"{{/target}}><span>{{{label}}}</span>{{#icon}}{{render '@icon' (contextData '@link' this) merge=true}}{{/icon}}</a>{{/link}}
    </div>

</div>

<!-- Large -->
<div class="personData{{#modifier}} {{.}}{{/modifier}}">

    {{#avatar}}
        {{render '@avatar' (contextData '@persondata' this) merge=true}}
    {{/avatar}}

    {{#image}}
        {{!-- Legacy support --}}
        <div class="personData-image" style="background-image: url({{path src}});"></div>
    {{/image}}

    <div class="personData-text">
        <strong class="personData-name">{{{name}}}</strong>
        {{#jobtitle}}<span class="personData-jobtitle">{{{.}}}</span>{{/jobtitle}}{{#organisation}}, <span class="personData-organisation">{{{.}}}</span>{{/organisation}}

        {{#description}}<div class="personData-description">{{{.}}}</div>{{/description}}

        {{#link}}<a class="personData-link" href="{{url}}"{{#target}} target="{{.}}"{{/target}}><span>{{{label}}}</span>{{#icon}}{{render '@icon' (contextData '@link' this) merge=true}}{{/icon}}</a>{{/link}}
    </div>

</div>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
        </div>

    </header>

        {{#samples}}
    <div style="margin-top: var(--sp-component);">
        {{#if ../is-large}}
            {{render '@persondata--large' (contextData '@persondata' this) merge=true}}
        {{else}}
            {{render '@persondata' (contextData '@persondata' this) merge=true}}
        {{/if}}
    </div>
        {{/samples}}

</section>
    {{/variants}}
 
/* Default */
{
  "avatar": {
    "initials": "BM",
    "image": {
      "src": "https://i.pravatar.cc/640"
    }
  },
  "name": "Leora Gulgowski",
  "jobtitle": "Direct Tactics Specialist"
}


/* With Organisation */
{
  "avatar": {
    "initials": "BM",
    "image": {
      "src": "https://i.pravatar.cc/640"
    }
  },
  "name": "Leora Gulgowski",
  "jobtitle": "Direct Tactics Specialist",
  "organisation": "Goldner GmbH & Co. KG"
}


/* With Description */
{
  "avatar": {
    "initials": "BM",
    "image": {
      "src": "https://i.pravatar.cc/640"
    }
  },
  "name": "Leora Gulgowski",
  "jobtitle": "Direct Tactics Specialist",
  "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
}


/* With Link */
{
  "avatar": {
    "initials": "BM",
    "image": {
      "src": "https://i.pravatar.cc/640"
    }
  },
  "name": "Leora Gulgowski",
  "jobtitle": "Direct Tactics Specialist",
  "link": {
    "label": "Zum Portrait",
    "url": "#",
    "icon": {
      "id": "arrow-right",
      "weight": "bold"
    }
  }
}


/* Complete */
{
  "avatar": {
    "initials": "BM",
    "image": {
      "src": "https://i.pravatar.cc/640"
    }
  },
  "name": "Leora Gulgowski",
  "jobtitle": "Direct Tactics Specialist",
  "organisation": "Goldner GmbH & Co. KG",
  "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
  "link": {
    "label": "Zum Portrait",
    "url": "#",
    "icon": {
      "id": "arrow-right",
      "weight": "bold"
    }
  }
}


/* Large */
{
  "avatar": {
    "initials": "BM",
    "image": {
      "src": "https://i.pravatar.cc/640"
    }
  },
  "name": "Leora Gulgowski",
  "jobtitle": "Direct Tactics Specialist",
  "modifier": "is-large"
}


/* Doc Only */
{
  "avatar": {
    "initials": "BM",
    "image": {
      "src": "https://i.pravatar.cc/640"
    }
  },
  "name": "Leora Gulgowski",
  "jobtitle": "Direct Tactics Specialist",
  "variants": [
    {
      "title": "Default",
      "samples": [
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist"
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "organisation": "Goldner GmbH & Co. KG"
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "link": {
            "label": "Zum Portrait",
            "url": "#",
            "icon": {
              "id": "arrow-right",
              "weight": "bold"
            }
          }
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "organisation": "Goldner GmbH & Co. KG",
          "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
          "link": {
            "label": "Zum Portrait",
            "url": "#",
            "icon": {
              "id": "arrow-right",
              "weight": "bold"
            }
          }
        }
      ]
    },
    {
      "title": "Large",
      "modifiers": ".is-large",
      "is-large": true,
      "samples": [
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist"
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "organisation": "Goldner GmbH & Co. KG"
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "link": {
            "label": "Zum Portrait",
            "url": "#",
            "icon": {
              "id": "arrow-right",
              "weight": "bold"
            }
          }
        },
        {
          "avatar": {
            "initials": "BM",
            "image": {
              "src": "https://i.pravatar.cc/640"
            }
          },
          "name": "Leora Gulgowski",
          "jobtitle": "Direct Tactics Specialist",
          "organisation": "Goldner GmbH & Co. KG",
          "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
          "link": {
            "label": "Zum Portrait",
            "url": "#",
            "icon": {
              "id": "arrow-right",
              "weight": "bold"
            }
          }
        }
      ]
    }
  ]
}
  • Content: 
    %personData {
    $line-height: 1.4;

    --avatar-size: #{$avatar_size};

    @include stack-spacing();

    display: flex;
    align-items: center;
    column-gap: 1rem;

    .avatar {
        align-self: flex-start;

        @include stack-spacing(0);
        flex-shrink: 0;
    }

    &-image {
        align-self: top;

        display: block;

        width: var(--avatar-size);
        height: var(--avatar-size);

        background-size: cover;
        border-radius: 50%;
    }

    &-text {
    }

    &-name,
    &-jobtitle,
    &-organisation {
        line-height: $line-height;
    }

    &-name {
        display: block;
    }

    &-image + &-name {
        @include stack-spacing(small);
    }

    &-link {
        @extend %link--stand-alone;
        @include stack-spacing(small);
    }

    // With description

    &-description {
        @include stack-spacing(small);
        display: block;

        @include font-size(small);

        > *:first-child {
            @include stack-spacing(0);
        }

    }

    &:has(.personData-name + .personData-description) &-text {
        // Magic number: Only works, when name only and it spans exactly one line
        margin-top: calc(.5 * (var(--avatar-size) - #{1rem * $line-height}));
    }

    &:has(.personData-description) &-text {
        // Magic number: Only works, when name and title span exactly two lines
        margin-top: calc(.5 * (var(--avatar-size) - #{2rem * $line-height}));
    }

    @include not-on-desktop(){
        --avatar-size: #{$avatar_size--mobile};
    }

}

%personData--large {

    %personData {

        &-name {
            @include text-size(2x-large);
        }

        &-image {
            width: $avatar_size--large--mobile;
            height: $avatar_size--large--mobile;
        }

    }

    .avatar {
        @extend %avatar--large;
    }

    @include not-on-desktop(){

        %personData {

            &-image {
                width: $avatar_size--large;
                height: $avatar_size--large;
            }

        }

    }

}

.personData {
    @extend %personData;

    &-image {
        @extend %personData-image;
    }

    &-text {
        @extend %personData-text;
    }

    &-name {
        @extend %personData-name;
    }

    &-jobtitle {
        @extend %personData-jobtitle;
    }

    &-organisation {
        @extend %personData-organisation;
    }

    &-description {
        @extend %personData-description;
    }

    &-link {
        @extend %personData-link;
    }

    &.is-large {
        @extend %personData--large;
    }

}
  • URL: /components/raw/persondata/_personData.styles.scss
  • Filesystem Path: components/03-fragments/personData/_personData.styles.scss
  • Size: 2.6 KB