Digital Design System

Biographies

Use a 1:1 ratio image with portrait imagery like this.

<!-- Biography-->
<div class="row">
    <div class="col col-md-10 col-lg-10 offset-md-2">

        <div id="firstname-lastname" class="mb-3">
            <p class="font-mono font-weight-semibold p-0 m-0">Firstname Lastname</p>
            <p class="p-0 m-0 font-p-small">Title/Job</p>
        </div>

        <div class="float-left left-peeking about-bio-peeking mt-3 mb-2 mr-4">
            <img class="img-fluid" src="/images/photo.png" alt="Firstname Lastname, CEO">
        </div>

        <p>At the board level, cyber presents a dilemma. It’s both critical enough to demand the attention of the board as a whole and specialised enough to require expertise that generalists don’t have. This problem isn’t unique to cyber: delegating specific types of risk to subcommittees could lead to mirroring silos at the board level, countering the board’s need to keep its focus on risks that affect the entire enterprise.</p>
        <p>At the board level, cyber presents a dilemma. It’s both critical enough to demand the attention of the board as a whole and specialised enough to require expertise that generalists don’t have. This problem isn’t unique to cyber: delegating specific types of risk to subcommittees could lead to mirroring silos at the board level, countering the board’s need to keep its focus on risks that affect the entire enterprise.</p>

    </div>
</div>
<hr>
<!-- end Biography-->

This module should only be used (currently) on About Us Leadership pages to list our global and local leadership. Do not use this module on the same page as a People & Bio component.

Use this molecule in conjunction with the anchor links molecule in order to facilitate navigation down a potentially long page of biographies. Remember to connect anchor links appropriately on the page – each in-page anchor link must connect to the name within the bio in-page snippet.

  • use an alt="portrait - name here" attribute for imagery featuring a headshot of a specific person (e.g. consultant, client). Replace the value “portrait - name here” with “portrait - John Smith”.
  • if using links, follow WCAG 2.1 AA standards

This component works with or without a photo. 

    <div class="float-left left-peeking about-bio-peeking mt-3 mb-2 mr-4"></div>

To implement, simply use as many of the following code block as needed to list multiple global and local leaders. Replace information (photo, name, title, and content) as needed. Duplicate and repeat the process.

Remember that in the above code, the element that has the id with a name must be must be aligned with the listing of the biography in the in-page anchor links module that you’re using. In that module, you should have a link listing “Firstname Lastname” with the following code: <a href="#firstname-lastname">Firstname Lastname</a>