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.
To use article in a standalone component, import DAFF_ARTICLE_COMPONENTS directly into your custom 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 {}
To use article in a module, import DaffArticleModule into your custom module:
import { NgModule } from '@angular/core';
import { DaffArticleModule } from '@daffodil/design/article';
import { CustomComponent } from './custom.component';
@NgModule({
declarations: [
CustomComponent,
],
exports: [
CustomComponent,
],
imports: [
DaffArticleModule,
],
})
export class CustomComponentModule { }
Warning
This method is deprecated. It's recommended to update all custom components to standalone.
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>