Article provides styles for common HTML elements to create readable, well-formatted content pages.
Article is designed for content pages that display large blocks of text-driven information.
Import DAFF_ARTICLE_COMPONENTS into your component:
import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
@Component({
selector: 'custom-component',
templateUrl: './custom-component.component.html',
imports: [
DAFF_ARTICLE_COMPONENTS,
],
})
export class CustomComponent {}
Deprecation notice:
DaffArticleModuleis deprecated. Use the standalone component imports instead.
Meta displays article metadata such as author name and date. It's a custom directive, not a native element selector. To use it, add daffArticleMeta to a paragraph (<p>).
Some interesting information about an article<daff-article>
<p daffArticleMeta>Some interesting information about an article</p>
</daff-article>
<h2>, <h3>, and <h4> headings include an anchor link that directs users to that section and a copy button that copies the heading URL to the clipboard. To disable this, add a nolink attribute to the heading element.
This is a h1 heading with
codeThis is a h2 heading with
codeThis is a h2 heading with no heading link
This is a h3 heading with
codeThis is a h4 heading with
codeThis is a h5 heading with
codeThis is a h6 heading with
code<daff-article>
<h1>This is a h1 heading with <code>code</code></h1>
<h2>This is a h2 heading with <code>code</code></h2>
<h2 nolink>This is a h2 heading with no heading link</h2>
<h3>This is a h3 heading with <code>code</code></h3>
<h4>This is a h4 heading with <code>code</code></h4>
<h5>This is a h5 heading with <code>code</code></h5>
<h6>This is a h6 heading with <code>code</code></h6>
</daff-article>
Code blocks include a copy button by default. To disable this, add a nocopy attribute to the pre element.
We could be discussing functions or types, but we should indicate the difference between these elements and regular text! <daff-article>
<p>
We could be discussing <code>functions</code> or <code>types</code>, but we
should indicate the difference between these elements and regular text!
</p>
</daff-article>
This is a line of code.
This is another line of code.
This code block doesn't have a copy button.<daff-article>
<pre><code>This is a line of code.
This is another line of code.
</code></pre>
<pre nocopy><code>This code block doesn't have a copy button.</code></pre>
</daff-article>
Articles support custom components like accordion, hero, or callout. Unlike typical HTML elements (<p>, <ol>, <ul>, etc), these components must be style encapsulated to prevent article styles from bleeding into their content.
The following Daffodil Design components are already encapsulated and can be used directiy:
For custom components, use the DaffArticleEncapsulatedDirective to prevent article styles from bleeding in.
Product Name Description Price T-Shirt White Crew Neck T-Shirt $20.00 Shorts Black Denim Shorts $40.00 Shoes White Sneakers $100.00 <daff-article>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>T-Shirt</td>
<td>White Crew Neck T-Shirt</td>
<td>$20.00</td>
</tr>
<tr>
<td>Shorts</td>
<td>Black Denim Shorts</td>
<td>$40.00</td>
</tr>
<tr>
<td>Shoes</td>
<td>White Sneakers</td>
<td>$100.00</td>
</tr>
</tbody>
</table>
</daff-article>
<daff-article>
<ul>
<li>This is an unordered list.</li>
<li>This is an unordered list.</li>
<li>This is an unordered list.</li>
<li>This is an unordered list.</li>
<li>This is an unordered list.</li>
<li>This is an unordered list.</li>
</ul>
</daff-article>
<daff-article>
<ol>
<li>This is an ordered list.</li>
<li>This is an ordered list.</li>
<li>This is an ordered list.</li>
<li>This is an ordered list.</li>
<li>This is an ordered list.</li>
<li>This is an ordered list.</li>
</ol>
</daff-article>
<daff-article>
<hr />
</daff-article>
This is a blockquote. This can be used for customer testimonals, document references, etc. Name your quote source here.
<daff-article>
<blockquote>
This is a blockquote. This can be used for customer testimonals, document
references, etc.
<cite>Name your quote source here.</cite>
</blockquote>
</daff-article>