Article Page Components

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

Code

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>

Documentation

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.

Code

HTML

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

Documentation

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

Link text here

Primary Asset

Link text here

Available to members and candidates

Primary Asset

Primary Asset Link Text and URL(FORMAT TYPE HERE)

Primary Asset

Primary Asset Link Text and URL(FORMAT TYPE HERE)

Available to members and candidates

Code

HTML

<a href="#" aria-labelledby="primary-asset-title" class="primary-asset">
    <img src="~/Content/img/Link_FFFFFF_Outlined.svg" alt="link icon" class="primary-asset-icon" />
    <p class="primary-asset-title">Primary Asset</p>
    <p class="primary-asset-text">Link text here</p>
</a>
<a href="#" aria-labelledby="primary-asset-title" class="primary-asset">
    <img src="~/Content/img/Link_FFFFFF_Outlined.svg" alt="link icon" class="primary-asset-icon" />
    <p class="primary-asset-title">Primary Asset</p>
    <p class="primary-asset-text">Link text here</p>
    <p class="locked-content">Available to members and candidates</p>
</a>
<a href="#" aria-labelledby="primary-asset-title" class="primary-asset">
    <img src="~/Content/img/Arrow Down 2_FFFFFF_Outlined.svg" alt="download arrow icon" class="primary-asset-icon" />
    <p class="primary-asset-title">Primary Asset</p>
    <p class="primary-asset-text">Primary Asset Link Text and URL(FORMAT TYPE HERE)</p>
</a>
<a href="#" aria-labelledby="primary-asset-title" class="primary-asset">
    <img src="~/Content/img/Arrow Down 2_FFFFFF_Outlined.svg" alt="download arrow icon" class="primary-asset-icon" />
    <p class="primary-asset-title">Primary Asset</p>
    <p class="primary-asset-text">Primary Asset Link Text and URL(FORMAT TYPE HERE)</p>
    <p class="locked-content">Available to members and candidates</p>
</a>

Documentation

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.

Q&A Section

Q&A Question

Q&A Answer

Example:

Is this an example question?

Yes, it is!

Code

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>

Documentation

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

Code

HTML

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

Documentation

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

Code

HTML

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

Documentation

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

Code

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>

Footnotes

Footnote description
Footnote description
Footnote description

Code

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>

Documentation

Problem Being Solved

An article includes endnote or 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.