Wellcome Web Components

Person 

<div class="person" itemscope="" itemtype="http://schema.org/Person">
    <div class="person__header">
        <img class="person__photo promo__photo lazyautosizes lazyloaded" src="../../assets/images/pattern-library/trooper.jpg" />
        <div class="person__header__text">
            <h3 class="person__job-title">Software Developer</h3>
            <h3 class="person__institution">Wellcome</h3>
            <h3 class="person__speciality">
                Notice: Undefined index: speciality in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 7 Call Stack: 0.0002 278776 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
                0.0005 288320 2. eval('?>
                <div class="person" itemscope="" itemtype="http://schema.org/Person">
                    <div class="person__header">
                        <?php print $variables['image'] ?>
                        <div class="person__header__text">
                            <h3 class="person__job-title">
                                <?php print $variables['job_title'] ?>
                            </h3>
                            <h3 class="person__institution">
                                <?php print $variables['institution'] ?>
                            </h3>
                            <h3 class="person__speciality">
                                <?php print $variables['speciality'] ?>
                            </h3>
                            <h2 class="person__title" itemprop="name">
                                <?php print $variables['name'] ?>
                            </h2>
                        </div>
                    </div>
                    <p class="person__doa">
                        <?php
    print $variables['date_of_appointment']
  ?>
                    </p>
                    <div class="person__contact">
                        <?php
    print $variables['contact_about']
  ?>
                    </div>
                    <div class="person__short-bio">
                        <?php
    print $variables['short_biography']
  ?>
                    </div>
                    <div class="person__long-bio">
                        <?php
    print $variables['biography']
  ?>
                    </div>
                    <div class="person__address" itemprop="address">
                        <?php
    print $variables['address']
  ?>
                    </div>
                </div>') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

            </h3>
            <h2 class="person__title" itemprop="name">Joe Bloggs</h2>
        </div>
    </div>
    <p class="person__doa"><strong>Date of appointment: </strong>29 March 2017</p>
    <div class="person__contact">
        Notice: Undefined index: contact_about in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 15 Call Stack: 0.0002 278776 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
        0.0005 288320 2. eval('?>
        <div class="person" itemscope="" itemtype="http://schema.org/Person">
            <div class="person__header">
                <?php print $variables['image'] ?>
                <div class="person__header__text">
                    <h3 class="person__job-title">
                        <?php print $variables['job_title'] ?>
                    </h3>
                    <h3 class="person__institution">
                        <?php print $variables['institution'] ?>
                    </h3>
                    <h3 class="person__speciality">
                        <?php print $variables['speciality'] ?>
                    </h3>
                    <h2 class="person__title" itemprop="name">
                        <?php print $variables['name'] ?>
                    </h2>
                </div>
            </div>
            <p class="person__doa">
                <?php
    print $variables['date_of_appointment']
  ?>
            </p>
            <div class="person__contact">
                <?php
    print $variables['contact_about']
  ?>
            </div>
            <div class="person__short-bio">
                <?php
    print $variables['short_biography']
  ?>
            </div>
            <div class="person__long-bio">
                <?php
    print $variables['biography']
  ?>
            </div>
            <div class="person__address" itemprop="address">
                <?php
    print $variables['address']
  ?>
            </div>
        </div>') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

    </div>
    <div class="person__short-bio">Stormtroopers were the assault troops of the Galactic Empire. Dissenting citizens referred to them as bucketheads, a derogatory nickname inspired by the bucket-shaped helmets of stormtroopers.</div>
    <div class="person__long-bio">
        Notice: Undefined index: biography in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 21 Call Stack: 0.0002 278776 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
        0.0005 288320 2. eval('?>
        <div class="person" itemscope="" itemtype="http://schema.org/Person">
            <div class="person__header">
                <?php print $variables['image'] ?>
                <div class="person__header__text">
                    <h3 class="person__job-title">
                        <?php print $variables['job_title'] ?>
                    </h3>
                    <h3 class="person__institution">
                        <?php print $variables['institution'] ?>
                    </h3>
                    <h3 class="person__speciality">
                        <?php print $variables['speciality'] ?>
                    </h3>
                    <h2 class="person__title" itemprop="name">
                        <?php print $variables['name'] ?>
                    </h2>
                </div>
            </div>
            <p class="person__doa">
                <?php
    print $variables['date_of_appointment']
  ?>
            </p>
            <div class="person__contact">
                <?php
    print $variables['contact_about']
  ?>
            </div>
            <div class="person__short-bio">
                <?php
    print $variables['short_biography']
  ?>
            </div>
            <div class="person__long-bio">
                <?php
    print $variables['biography']
  ?>
            </div>
            <div class="person__address" itemprop="address">
                <?php
    print $variables['address']
  ?>
            </div>
        </div>') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

    </div>
    <div class="person__address" itemprop="address">
        Notice: Undefined index: address in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 24 Call Stack: 0.0002 278776 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
        0.0005 288320 2. eval('?>
        <div class="person" itemscope="" itemtype="http://schema.org/Person">
            <div class="person__header">
                <?php print $variables['image'] ?>
                <div class="person__header__text">
                    <h3 class="person__job-title">
                        <?php print $variables['job_title'] ?>
                    </h3>
                    <h3 class="person__institution">
                        <?php print $variables['institution'] ?>
                    </h3>
                    <h3 class="person__speciality">
                        <?php print $variables['speciality'] ?>
                    </h3>
                    <h2 class="person__title" itemprop="name">
                        <?php print $variables['name'] ?>
                    </h2>
                </div>
            </div>
            <p class="person__doa">
                <?php
    print $variables['date_of_appointment']
  ?>
            </p>
            <div class="person__contact">
                <?php
    print $variables['contact_about']
  ?>
            </div>
            <div class="person__short-bio">
                <?php
    print $variables['short_biography']
  ?>
            </div>
            <div class="person__long-bio">
                <?php
    print $variables['biography']
  ?>
            </div>
            <div class="person__address" itemprop="address">
                <?php
    print $variables['address']
  ?>
            </div>
        </div>') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

    </div>
</div>
  • Content: 
    .person-group {
  .person {
    border: 0;
    padding-bottom: 0;
  }
}

.person {
  @include rem(padding-bottom, $grid-typo-spacing-m);
  border-bottom: solid 1px $ruleAndSeparatorColour;

  + * {
    @include rem(margin-top, $grid-typo-spacing-m);
  }

  & + & {
    border-top: 0;
    margin-top: 0;
  }
}

.person__header {
  @include stickOutBoxInContent;
  @include rem(margin, $grid-typo-spacing-l 0 $grid-typo-spacing-m);
  font-size: 0;
  position: relative;

  ul & {
    @include rem(margin, $grid-typo-spacing-l 0 $grid-typo-spacing-xs);
    left: 0;
    width: 100%;
  }

  @include respond-to($grid-breakpoint-s) {
    @include rem(margin-top, $grid-typo-spacing-xl);
  }
}
// here we're also overriding the promo photo class just in case
.person__photo,
.person__photo.promo__photo {
  display: inline-block;
  width: $column * 3 - $column-padding;
}

.person__header__text {
  @include rem(margin-top, $grid-typo-spacing-s);
  box-sizing: border-box;

  @include respond-to($grid-breakpoint-s) {
    @include rem(padding-left, $column-spacing);
    display: inline-block;
    margin-top: 0;
    vertical-align: middle;
    width: calc(100% - #{$column * 3 - $column-padding});

    ul & {
      padding-left: 0;
      width: 100%;
    }
  }
}

.person__job-title,
.person__institution,
.person__speciality {
  color: $ncDarkGrey;
  font-weight: normal;
  margin: 0;

  ul & {
    @include font-size-with-line-height(
      $smallTextFontSize,
      $smallTextLineHeight
    );
  }
}

.person__title {
  border: 0;
  margin: 0;
  padding: 0;

  ul & {
    @include font-size-with-line-height($h3FontSize, $h3LineHeight);
  }
}

.person__doa {
  @include rem(margin-bottom, $grid-typo-spacing-s);
  &:empty {
    display: none;
  }
}

.contact-about {
  @include rem(margin-top, $grid-typo-spacing-xxs);
}
  • URL: /components/raw/person/person.scss
  • Filesystem Path: ../../modules/custom/corp_markup/theme/paragraphs/person_governance.tpl.php/person.scss
  • Size: 1.8 KB

Person

A highlight module displaying details of a single Person.

{
  "name": "Joe Bloggs",
  "job_title": "Software Developer",
  "institution": "Wellcome",
  "date_of_appointment": "<strong>Date of appointment: </strong>29 March 2017",
  "short_biography": "Stormtroopers were the assault troops of the Galactic Empire. Dissenting citizens referred to them as bucketheads, a derogatory nickname inspired by the bucket-shaped helmets of stormtroopers.",
  "image": "<img class=\"person__photo promo__photo lazyautosizes lazyloaded\" src=\"{{ path /assets/images/pattern-library/trooper.jpg }}\" />"
}
  • Handle: @person
  • Preview:
  • Filesystem Path: ../../modules/custom/corp_markup/theme/paragraphs/person_governance.tpl.php/person_governance.tpl.php