Article Page Components
Article Information
Example
Book Series Original Publication Date Original Publication VolumeOriginal Publication Issue
Title
Subtitle
Original Publication Original Publisher
Reviewed by
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 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
Problem Being Solved
When To Use
When Not To use
Formatting
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
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
- Footnote description
- Footnote description
- 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>