Skip to main content

Card (In Development)

Cards are snapshots of content that are typically used in a group to present collections of related information.
Cards can represent any quickly consumable information. Avoid trying to create a narrative on a card. Instead, focus on bite sized content chunks consumed at a glance.
The design has updates for this module that are not yet incorporated. Please contact mwfq@microsoft.com before using this on your site.

Example

Title for Double Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nibh eu tellus rutrum laoreet. Integer pellentesque porta risus. Curabitur sit amet egestas lacus. Curabitur vitae imperdiet velit. Suspendisse porttitor tristique orci suscipit commodo.

Title for Single Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nibh eu tellus rutrum laoreet. Integer pellentesque porta risus. Curabitur sit amet egestas lacus. Curabitur vitae imperdiet velit. Suspendisse porttitor tristique orci suscipit commodo.

Best practices

Cards create an opportunity to present a collection of related content in a rich and dynamic way. Cards offer flexible layout options that can be used interchangeably with cards using other options; often a requirement when the content available is not consistent.

Users creating their own types of cards will use this card as a base. The new card is then given a semantic name or type, which can be used to bind styles and behavior to.

Use cards when:

  • There are many content items that need to be displayed.
  • The content available between each content item is not consistent resulting in many different sizes and layouts that can be used together.
  • The content items need to be sorted in various ways that can't rely on a curated layout. However, Cards can also be used for curated layouts.

Do

Use cards when displaying a feed of content or when a stronger isolation between each content items is needed.

Cards are also well suited for scenarios where the content is not consistent and requires different fields, image sizes, or content, which is often the case in a feed.

Don’t

  • Avoid trying to create a narrative on a card. Instead, focus on bite sized content chunks consumed at a glance.

Options

  • Single: Add a class name f-single to a card to create a single card.
  • Double: Add a class name f-double to create a 1x2 card.

Development

  • Schema definition: The card schema defines the acceptable configurations, requirements, and options for each component.

Code and preview