Author

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

Default appearance

Aaron Berg
Aaron Berg
Adam Cunningham
Adam Cunning
Andrew Geraghty
Andrew Geraghty
Danial Hewetson
Danial Hewetson
Roman Rus
Roman Rus
<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>

Shortcode

[Author]

Yellow

Aaron Berg
Aaron Berg
Adam Cunningham
Adam Cunning
Andrew Geraghty
Andrew Geraghty
Danial Hewetson
Danial Hewetson
Roman Rus
Roman Rus
<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>

Shortcode

[Author colour="yellow"]

Green

Aaron Berg
Aaron Berg
Adam Cunningham
Adam Cunning
Andrew Geraghty
Andrew Geraghty
Danial Hewetson
Danial Hewetson
Roman Rus
Roman Rus
<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>

Shortcode

[Author colour="green"]

Parameters

Parameter Values Description
post_id user-specified integer Specifies the ID of the post that has the author tags you want to display. If no post nor author ID is specified, the current post is used.
author_id user-specified string Specifies a comma-separated list of all author IDs you want to display. If no post nor author ID is specified, the current post is used.
colour blue, green, yellow Specifies the colour of the outline and name popup. The default is "blue".