Version: 1.x

fast-card

The fast-card component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.

Setup

import {
    provideFASTDesignSystem,
    fastCard
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastCard()
    );

Usage

Live Editor

<fast-card>
    <h3>Card title</h3>
    <p>At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus et ultricies augue aliquet.</p>
    <fast-button>Learn more</fast-button>
</fast-card>

Result

Create your own design

import {
    Card,
    cardTemplate as template,
} from "@microsoft/fast-foundation";
import { cardStyles as styles } from "./my-card.styles";

export const myCard = Card.compose({
    baseName: "card",
    template,
    styles,
});

API

class: `Card`

Superclass

Name	Module	Package
`FoundationElement`	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Description	Inherited From
`$presentation`	public	`ComponentPresentation or null`	A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`	Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
`styles`	public	`ElementStyles or void or null`	Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`templateChanged`	protected			`void`	FoundationElement
`stylesChanged`	protected			`void`	FoundationElement

Slots

Name	Description
	The default slot for the card content

Setup​

Usage​

Create your own design​

API​

class: Card​

Superclass​

Fields​

Methods​

Slots​

Additional resources​