We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Article Page Components

Article Hero

Topic: Sustainability

Title

October 25, 2022 Article

HTML

Problem Being Solved

User friendly introduction to the article content.

When to Use

This should be the first component of an article.

When Not to Use

Any other use aside from the first component of an article.

Note

This component uses browser native srcset and size attributes to support responsive images. More information can be found here. It is expected that these values will be standardized (Authors only use specific widths for specific breakpoints). The specific values here are only applicable to this example.

Topic Banner Variants

The following variants of the topic banner are available.

no additional class
.article-topic--sustainability
.article-topic--resilience
.article-topic--tech
.article-topic--insights

Exclusive Content Banner

RPC+ Exclusive Content Get RPC+

HTML

Problem Being Solved

Showing user article content is a paid exclusive. Also invite user to pay for access.

When to Use

An article is exclusive to members/payment.

When Not to Use

For free content

Author List

  1. FirstName LastName
  2. FirstName LastName
  3. FirstName LastName

HTML

Problem Being Solved

Showing authoring credits

Options

Author names may be wrapped with an anchor tag to link to that author's content.

PL Credit Aside

CFA Members Earn
0.75PL
Record Credit
Manage your credits

HTML

Problem Being Solved

Show PL credit value, allow users to redeem and manage their credits.

User Visible Article Metadata

Section Title

Content

HTML

Problem Being Solved

Displaying user visible metadata about the current article.

When To Use

When showing tags, publisher information, additional formats, etc.

When Not To Use

This is not intended for article content. Any other usage than user visible metadata is not supported.

Tags

Tagged Under
Tag One Tag Two Tag Three Tag Four

HTML

Problem Being Solved

Displaying associated article tags.

When To Use

When showing associated article tags.

When Not To Use

Any other usage than displaying user visible article tags.

Article Information

Book Series Original Publication Date Original Publication VolumeOriginal Publication Issue

Title

Subtitle

Original Author, Author Credential Original Author Original Publication Original Publisher

Reviewed by First Last First Last

HTML

<div class="article-info">
    <p class="publication-info">
 <!-- Pub ID, Book Series -->
        <span class="publication-id">Book Series</span>
<!-- Publication Date -->
         <span class="publication-date">Original Publication Date</span>
 <!-- Publication Volume/Issue -->
        <span class="publication-volume">
            <span class="publication-vol">Original Publication Volume</span>
            <span class="publication-iss">Original Publication Issue</span>
        </span>
    </p>
<!-- Article Title -->
    <h1 class="article-title">Title</h1>
<!-- Subtitle -->
    <h2 class="alt subtitle">Subtitle</h2>
<!-- Original Author Info -->
    <p class="publication-info">
<!-- List of original authors, no punctuation or spaces between elements -->
        <span class="publication-original-authors">
            <span class="publication-original-author">
                <span class="author-first">Original</span>
                <span class="author-last">Author, Author Credential</span>
            </span>
            <span class="publication-original-author">
                <span class="author-first">Original</span>
                <span class="author-last">Author</span>
            </span>
        </span>
<!-- Original publication -->
        <span class="publication-journal">Original Publication</span>
<!-- Original Publisher -->
        <span class="publication-publisher">Original Publisher</span>
    </p>
<!-- Summary/Review/Only Author Info -->
<!-- Begin Reviews with "Reviewed by". Begin Summaries with "Summarized by". Other types have no text besides author names. -->
    <p class="publication-info">Reviewed by
        <span class="publication-author">
            <span class="author-first">First</span>
            <span class="author-last">Last</span>
        </span>
        <span class="publication-author">
            <span class="author-first">First</span>
            <span class="author-last">Last</span>
        </span>
    </p>
</div>

Problem Being Solved

Metadata that gives the user the context of an article is grouped and displayed in an easy to scan way.

When to Use

It should always be present on content that uses the article format. This includes articles, book reviews, multimedia, etc.

When Not to Use

It should not be used for non-article content.

Short Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis est vitae urna volutpat feugiat at eu orci. Mauris non sem suscipit, pretium dolor nec, accumsan dui. Nullam lacus elit, rutrum ut nibh non, facilisis consectetur ante. Etiam quam mauris, accumsan non gravida sed, semper id enim. Proin semper pulvinar est, eget rhoncus nibh laoreet ut. Ut feugiat lectus ac lectus mattis, ultricies condimentum dui pharetra. Donec condimentum iaculis congue. Donec faucibus orci et nulla pellentesque, gravida feugiat libero luctus. Sed sit amet orci commodo, vestibulum nibh quis, molestie lacus.

HTML

<section>
    <p class="article-description">Short Description</p>
    <hr class="small-divider">
</section>

Problem Being Solved

A brief summary of the article helps the user decide whether they want to read it.

When to Use

It is optional for content that uses the article format. This includes articles, book reviews, multimedia, etc.

When Not to Use

It should not be used for non-article content.

Primary Content Asset

Primary Asset

Primary Asset Link Text and URL

Available to members and candidates

HTML

                <section class="primary-asset">
                <p class="primary-asset-title">Primary Asset</p>
                <a href="#" class="int-nav">Primary Asset Link Text and URL</a>
                <p class="locked-content">Available to members and candidates</p>
                </section>

Problem Being Solved

Links to documents need to be presented in a way that conveys their importance and draws the user’s attention.

When to Use

It can be used when the linked document contains the main content that the user wishes to read, for example, full Refresher Readings. It can also be used when the document has information that is essential to the user journey.

When Not to Use

It should not be used for content that is of secondary importance. There should be no more than one or two uses per page.

Primary Content Asset (Required Login)

HTML

    <section class="primary-asset login-required">
        <h4>Two ways to enjoy this Refresher Reading.</h4>
        <h4 class="locked-content">Available to members only. Login required</h4>
        <a class="locked-content" href="#" >Access the Full Reading in the learning Ecosystem</a>
        <a class="locked-content" href="#" >Download the full reading (PDF)</a>
    </section>

Problem Being Solved

Q&A Section

Q&A Question

Q&A Answer

Example:

Is this an example question?

Yes, it is!

HTML

<!-- Use an H2 if there is a title -->
<h2>New Section Title</h2>
<section>
    <div class="qa-question">Q&A Question</div>
    <p>Q&A Answer</p>
    <div class="qa-question">Q&A Question</div>
    <p>Q&A Answer</p>
</section>

Problem Being Solved

Article content is structured using a Q&A format.

When to Use

It is optional for content that uses the article format. This includes articles, book reviews, multimedia, etc.

When Not to Use

It should not be used for non-article content.

Quotes

Pull Quote

HTML

<aside class="pull-quote">
    <q>"Pull Quote — Quote"</q>
    <cite>
        <a href="#">Pull Quote — Quote"</a>
    </cite>
</aside>

Problem Being Solved

A phrase or excerpt from an article is displayed within the same article in a way that draws the user’s attention.

When to Use

It can be used to highlight a key topic or entice the user to read more.

When Not to Use

It should not be used for text from an external source, or for long text.

Formatting

Only link quote source when a URL is available — otherwise, leave unlinked.

Block Quotes

“Sed id massa mattis, consequat ante in, convallis turpis. Sed orci lectus, pretium vitae scelerisque sit amet, pulvinar vitae ante. Fusce laoreet leo non ipsum volutpat, ac porta nisi ultrices. ”

Block Quote — Citation, Link

HTML

<blockquote class="block-quote">
    <p>"Block Quote — Quote"</p>
    <cite>
        <a href="#">Block Quote — Quote"</a>
    </cite>
</blockquote>

Problem Being Solved

A quotation from an external source is displayed within article content.

When to Use

It can be used in an article to display a quote that is a sentence or longer. A source should be included and linked when possible.

When Not to Use

It should not be used for short quotes, or to display text from the same article.

Formatting

Only link quote source when a URL is available — otherwise, leave unlinked.

Article Notes

End Notes

(Note Indicator)Note text

(Note Indicator)Note text

HTML

<p id="note-1">
    <span class="note-indicator">(Note Indicator)</span>Note text
</p>
<p id="note-2">
    <span class="note-indicator">(Note Indicator)</span>Note text
</p>

Problem Being Solved

An article includes endnote text.

When to Use

It is optional for content that uses the article format. This includes articles, book reviews, multimedia, etc.

When Not to Use

It should not be used for non-article content. It especially should not be used for pages with content written specifically for the web, since its usability is poor.

Footnotes

  1. Footnote description
  2. Footnote description
  3. Footnote description

HTML

<ol class="footnotes">
    <li id="footnote-1">Footnote description</li>
    <li id="footnote-2">Footnote description</li>
    <li id="footnote-3">Footnote description</li>
</ol>

Problem Being Solved

An article includes footnote text.

When to Use

It is optional for content that uses the article format. This includes articles, book reviews, multimedia, etc.

When Not to Use

It should not be used for non-article content. It especially should not be used for pages with content written specifically for the web, since its usability is poor.