graycoreio/daffodil

<h1>Article</h1>
<p>Article provides styles to common element selectors to create an article in a content page.</p>

<h2>Overview</h2>
<p>Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.</p>

<h2>Headings</h2>
<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>

<h2>Article Meta</h2>
<p>Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add <code>daffArticleMeta</code> to a paragraph (<code>&lt;p&gt;</code>).</p>
<design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container>

<h2>Link</h2>
<p>The link style in an article uses the default browser link style.</p>
<design-land-example-viewer-container example="article-link"></design-land-example-viewer-container>

<h2>Table</h2>
<design-land-example-viewer-container example="article-table"></design-land-example-viewer-container>

<h2>Lists</h2>
<h3>Unordered List</h3>
<design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>

<h3>Ordered List</h3>
<design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>

<h2>Code</h2>
<p>These are styles for inline and multiline blocks of code.</p>

<h3>Inline code</h3>
<design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>

<h3>Code blocks</h3>
<design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>

<h2>Horizontal Rules</h2>
<design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container>

<h2>Blockquote</h2>
<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>