SIA Web Design Library

Byline

No notes defined.

<div class='c-byline'>
    <dl class='c-byline__items'>
        <dt class='c-byline__items__item__label'>Created on</dt>
        <dd class='c-byline__items__item__value c-byline__created'>

            <time class='c-date c-byline__date  dt-start ' datetime='15.07.2020, 19:17 CEST' />
            15.07.2020, 19:17 CEST
            </time>

        </dd>
        <dt class='c-byline__items__item__label'>Author</dt>
        <dd class='c-byline__items__item__value c-byline__author'>
            <div class='h-card c-index-card c-index-card--citation c-byline__index-card'>
                <div class="c-index-card__media-wrapper">
                    <span class='u-photo c-headshot c-index-card__headshot'>
                        <a href='https://peter.vandor' class='c-headshot__link ' title='Dr. Peter Vandor'>
                            <img class='c-headshot__image' src='/images/portrait-Peter-Vandor-1x1.jpg' alt='' title='' />
                        </a>
                    </span>
                </div>
                <div class='c-index-card__entity c-index-card__content-wrapper'>

                    <span class='p-name'><a class='u-url ' href='https://peter.vandor'>Dr. Peter Vandor</a></span>

                    <span class='c-index-card__entity__work c-index-card__entity__work--with-organization'>

                        <span class='p-job-title'>Founder and Academic Director</span>

                        <span class='p-org'>Social Impact Award</span>
                    </span>
                    <span class='c-index-card__entity__links'>

                        <span class='u-email'>
                            <a class='u-email c-link--muted c-link--minimal' href='mailto:peter@vandor.mail'>peter@vandor.mail</a>
                        </span>

                        <span class='p-tel'>
                            <a class='p-tel c-link--muted c-link--minimal' href='tel:+436606493214'>+436606493214</a>
                        </span>
                    </span>
                </div>
            </div>
        </dd>
    </dl>
</div>
 
<div class='{{ get_component_class( 'byline', display ) }}'>
    <dl class='c-byline__items'>
        <dt class='c-byline__items__item__label'>{{ 'Created on' | t }}</dt>
        <dd class='c-byline__items__item__value c-byline__created'>{% include get_template( 'date', 'unit' ) with created %}</dd>
        <dt class='c-byline__items__item__label'>{{ 'Author' | t }}</dt>
        <dd class='c-byline__items__item__value c-byline__author'>{% include get_template( 'index-card', 'unit' ) with author %}</dd>
    </dl>
</div>
 
{
  "author": {
    "display": {
      "component": "byline",
      "modifiers": [
        "citation"
      ]
    },
    "headshot": {
      "src": "/images/portrait-Peter-Vandor-1x1.jpg"
    },
    "name": "Dr. Peter Vandor",
    "role": "Founder and Academic Director",
    "organisation": "Social Impact Award",
    "url": "https://peter.vandor",
    "email": "peter@vandor.mail",
    "tel": "+436606493214"
  },
  "created": {
    "display": {
      "component": "byline"
    },
    "formatted": "15.07.2020, 19:17 CEST"
  }
}