Author

Tagging authors provides easy access to their online profile and publications.

Default appearance

[Author]

<div class="bocss-author">
    <div class="bocss-author__bio">
        <a aria-label="Aaron Berg" title="Aaron Berg" href="#" class="bocss-author__icon bocss-author__blue">
            <img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/AaronBerg.jpg" alt="Aaron Berg" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__blue"><span class="bocss-author__name">Aaron Berg</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Adam Cunning" title="Adam Cunning" href="#" class="bocss-author__icon bocss-author__blue">
            <img src="https://design.bankofcanada.ca/docroot/wp-content/uploads/2019/04/AdamCunning.jpg" alt="Adam Cunning" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__blue"><span class="bocss-author__name">Adam Cunning</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Danial Hewetson" title="Danial Hewetson" href="#" class="bocss-author__icon bocss-author__blue">
            <img src="https://design.bankofcanada.ca/docroot/wp-content/uploads/2019/04/DanialHewetson.jpg" alt="Danial Hewetson" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__blue"><span class="bocss-author__name">Danial Hewetson</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Roman Rus" title="Roman Rus" href="#" class="bocss-author__icon bocss-author__blue">
            <img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/RomanRus.jpg" alt="Roman Rus" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__blue"><span class="bocss-author__name">Roman Rus</span></div>
    </div>
</div>

Yellow

[Author colour="yellow"]

<div class="bocss-author">
    <div class="bocss-author__bio">
        <a aria-label="Aaron Berg" title="Aaron Berg" href="#" class="bocss-author__icon bocss-author__yellow">
            <img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/AaronBerg.jpg" alt="Aaron Berg" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__yellow"><span class="bocss-author__name">Aaron Berg</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Adam Cunning" title="Adam Cunning" href="#" class="bocss-author__icon bocss-author__yellow">
            <img src="https://design.bankofcanada.ca/docroot/wp-content/uploads/2019/04/AdamCunning.jpg" alt="Adam Cunning" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__yellow"><span class="bocss-author__name">Adam Cunning</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Danial Hewetson" title="Danial Hewetson" href="#" class="bocss-author__icon bocss-author__yellow">
            <img src="https://design.bankofcanada.ca/docroot/wp-content/uploads/2019/04/DanialHewetson.jpg" alt="Danial Hewetson" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__yellow"><span class="bocss-author__name">Danial Hewetson</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Roman Rus" title="Roman Rus" href="#" class="bocss-author__icon bocss-author__yellow">
            <img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/RomanRus.jpg" alt="Roman Rus" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__yellow"><span class="bocss-author__name">Roman Rus</span></div>
    </div>
</div>

Green

[Author colour="green"]

<div class="bocss-author">
    <div class="bocss-author__bio">
        <a aria-label="Aaron Berg" title="Aaron Berg" href="#" class="bocss-author__icon bocss-author__green">
            <img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/AaronBerg.jpg" alt="Aaron Berg" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__green"><span class="bocss-author__name">Aaron Berg</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Adam Cunning" title="Adam Cunning" href="#" class="bocss-author__icon bocss-author__green">
            <img src="https://design.bankofcanada.ca/docroot/wp-content/uploads/2019/04/AdamCunning.jpg" alt="Adam Cunning" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__green"><span class="bocss-author__name">Adam Cunning</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Danial Hewetson" title="Danial Hewetson" href="#" class="bocss-author__icon bocss-author__green">
            <img src="https://design.bankofcanada.ca/docroot/wp-content/uploads/2019/04/DanialHewetson.jpg" alt="Danial Hewetson" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__green"><span class="bocss-author__name">Danial Hewetson</span></div>
    </div>
    <div class="bocss-author__bio">
        <a aria-label="Roman Rus" title="Roman Rus" href="#" class="bocss-author__icon bocss-author__green">
            <img src="https://design.bankofcanada.ca/wp-content/uploads/2019/04/RomanRus.jpg" alt="Roman Rus" class="bocss-author__image">
        </a>
        <div class="bocss-author__tooltip bocss-author__green"><span class="bocss-author__name">Roman Rus</span></div>
    </div>
</div>

Parameters

Parameter	Values	Description
post_id	user-specified integer	ID of the post that contains the author tags to be displayed. If no post or author ID is specified, the current post will be used.
author_id	user-specified string	A list of all author IDs separated by commas. If no post or author ID is specified, the current post will be used.
colour	blue, green, yellow	Colour for the photo outline and name label. "Blue" is the default colour.