Article Page Components

Article Information

Example

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

When To Use

When Not To use

Formatting

Short Description

Example

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

When To Use

When Not To use

Formatting

Primary Asset

Primary Asset Link Text and URL(FORMAT TYPE HERE)

Available to members and candidates

Code

HTML

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

Documentation

Problem Being Solved

When To Use

When Not To use

Formatting

Q&A Section

Example

Q&A Question

Q&A Answer

Is this an example question?

Yes, it is!

Code

HTML

<!-- Use an H2 if there is a title -->
<h2 class="article-section">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

When To Use

When Not To use

Formatting

Quotes

Pull Quote

Example

Code

HTML

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

Block Quotes

Example

“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

When To Use

When Not To use

Formatting

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

Article Notes

End Notes

Example

(Note Indicator)Note text

(Note Indicator)Note text

Footnotes

Example

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

Code

HTML

<section>
    <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>
</section>
        

Documentation

Problem Being Solved

When To Use

When Not To use

Formatting