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

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

Primary Content Asset

Example

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

Q&A Section

Example

Q&A Answer

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

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

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