import { Canvas, Meta, Source, Story } from '@storybook/addon-docs'; import * as stories from './card.stories';
A card is an element which you can put any kind of content inside. Make sure
you wrap your content in a <fas-card-section>
element in order to achieve the traditional card look.
A card container has no padding, allowing you to place full-bleed images
inside. Use the <fas-card-divider> and
<fas-card-section> components to sub-divide a card.
| import { Meta, moduleMetadata, Story } from '@storybook/angular'; | |
| import { MarkdownToHtmlPipe } from '@workspace-storybook/ui-markdown'; | |
| import { SanitizeUrlPipe } from '@workspace-storybook/ui-security'; | |
| import { FasCardModule } from './card.module'; | |
| export const meta: Meta = { | |
| title: 'Card', | |
| decorators: [ | |
| moduleMetadata({ | |
| imports: [FasCardModule, MarkdownToHtmlPipe, SanitizeUrlPipe], | |
| }), | |
| ], | |
| }; | |
| export const basics: Story = args => ({ | |
| props: args, | |
| template: ` | |
| <fas-card [style.width.px]="300"> | |
| <fas-card-divider>{{ dividerText }}</fas-card-divider> | |
| <img [src]="imageSrcUrl | sbSanitizeUrl" /> | |
| <fas-card-section> | |
| <div [innerHTML]="sectionContentMarkdown | sbMarkdownToHtml"></div> | |
| </fas-card-section> | |
| </fas-card> | |
| `, | |
| }); | |
| basics.args = { | |
| dividerText: 'This is a header', | |
| imageSrcUrl: | |
| 'https://get.foundation/sites/docs/assets/img/generic/rectangle-1.jpg', | |
| sectionContentMarkdown: `#### This is a card. | |
| It has an easy to override visual style, and is appropriately subdued.`, | |
| }; | |
| basics.argTypes = { | |
| dividerText: { | |
| description: '<code><fas-card-divider></code> text', | |
| }, | |
| imageSrcUrl: { | |
| description: '<code><img src></code> URL', | |
| }, | |
| sectionContentMarkdown: { | |
| description: '<code><fas-card-section></code> content in Markdown', | |
| }, | |
| }; | |
| basics.parameters = { | |
| controls: { expanded: true }, | |
| }; |