Sidebar Components

Code: CE Credits

HTML

<div class="card card-sidebar">
    <p class="ce-credit-value">2 CE</p>
    <p>including <span class="ser-credit-value">0.5 SER</span></p>
    <a href="#" class="button record-credits">Record CE</a>
    <p><a href="#">Manage your Continuing Education credits</a></p>
</div>

<div class="card card-sidebar">
    <p class="ce-credit-value">2 CE</p>
    <p>including <span class="ser-credit-value">0.5 SER</span></p>
    <p class="ce-success">Your CE credits have been recorded.</p>
    <p><a href="#">Manage your Continuing Education credits</a></p>
</div>

<div class="card card-sidebar">
    <p class="ce-credit-value">2 CE</p>
    <p>including <span class="ser-credit-value">0.5 SER</span></p>
    <a href="#" class="button record-credits">Record CE</a>
    <p class="ce-error">We were not able to record your CE credits. Please try again. Contact us if you continue to see this message.</p>
    <p><a href="#">Manage your Continuing Education credits</a></p>
</div>
                

Code: Additional Information

HTML

<div class="card card-sidebar">
    <p class="card-title">Additional Information</p>
    <p>Published by Publisher</p>
    <p><span class="additional-information">Chapters</span><span class="additional-information">Pages</span></p>
    <p>DOI</p>
    <p>ISBN-10: 1944960112</p>
    <p>ISBN-13: 978-1-56619-909-4</p>
    <div>
        <strong>Original Publication:</strong>
        <p>
            <span class="reference-authors">
                <span class="reference-author"><span class="reference-last">[LastName]</span><span class="reference-first">[First initial]</span></span>
                <span class="reference-author"><span class="reference-last">[LastName]</span><span class="reference-first">[First initial]</span></span>
            </span>
            <span class="reference-year">[PublicationYear]</span>
            <span class="reference-title"><a href="#">[Article / Book / Chapter Title + URLForTitle]</a></span>
            <span class="reference-publication">[Title of Journal / Book / Series]</span>
            <span class="reference-comment">[Comment]</span>
            <span class="reference-volume">
                <span class="reference-vol">Vol. [VolumeNumber]</span><span class="reference-no">No. [IssueNumber]</span>
                <span class="reference-date">[PublicationDate]</span>
                <span class="reference-month">[PublicationMonth]</span>
            </span>
            <span class="reference-pub">
                <span class="reference-edition">[EditionNumber]</span>
                <span class="reference-location">[PublisherLocation]</span><span class="reference-publisher">[PublisherName]</span>
            </span>
            <span class="reference-pages">[PageRange]</span>
            <span class="reference-doi">DOI:[DOI]</span>
            <span class="reference-annotation">[Annotation]</span>
        </p>
    </div>
</div>
                

Code: Media Contact

HTML

<div class="card card-sidebar">
    <p class="card-title">Media Contact</p>
    <div class="media-contact">
        <div class="media-contact-name h5">Person: First Name Person: Last Name</div>
        <div class="media-contact-title">Person: Job Title</div>
        <div class="media-contact-phone"><a href="#">Person: Phone Number</a></div>
        <div class="media-contact-email"><a href="#">Person: email address</a></div>
    </div>
    <div class="media-contact">
        <div class="media-contact-name h5">Grace Dusseau</div>
        <div class="media-contact-title">Director, Corporate Communications EMEA</div>
        <div class="media-contact-phone"><a href="tel:+4402073309551">+44 (0) 20-7330-9551</a></div>
        <div class="media-contact-email"><a href="mailto:grace.dusseau@cfainstitute.org">grace.dusseau@cfainstitute.org</a></div>
    </div>
</div>
                

Documentation

Problem Being Solved

Additional information needs to be displayed for an article.

When To Use

This pattern is used to display metadata such as CE credits, topics, or original publication information.

When Not To use

This pattern is only used on page-level structures such as article.

Formatting

  • Headers are in a tag with "card-title" class.
  • Generally, each line of body should be in a block level element.
  • References in the sidebar are structured slightly different to accomodate the additional metadata or original citation components.
  • Record CE Button should be a link to the manage credits page in case JS fails.

Example: CE Credits

2 CE

including 0.5 SER

Your CE credits have been recorded.

Manage your Continuing Education credits

2 CE

including 0.5 SER

Record CE

We were not able to record your CE credits. Please try again. Contact us if you continue to see this message.

Manage your Continuing Education credits


Example: Additional Information

Additional Information

Published by Publisher

ChaptersPages

DOI

ISBN-10: 1944960112

ISBN-13: 978-1-56619-909-4

Original Publication:

[LastName][First initial] [LastName][First initial] [PublicationYear] [Article / Book / Chapter Title + URLForTitle] [Title of Journal / Book / Series] [Comment] Vol. [VolumeNumber]No. [IssueNumber] [PublicationDate] [PublicationMonth] [EditionNumber] [PublisherLocation][PublisherName] [PageRange] DOI:[DOI] [Annotation]


Example: Media Contacts

Media Contact

Person: First Name Person: Last Name
Person: Job Title
Grace Dusseau
Director, Corporate Communications EMEA