Cards

Cards are flexible components used to display content on a single topic. They should be easy to scan for actionable information. Cards can contain images, graphics, and text. All information positioned in the card container should demonstrates the intended hierarchy of the content.

---

Default Card Anatomy

The card container is the only required element in a card. All other elements are optional.

Card layouts vary to support the types of content they contain. The following elements are the most common components of a card for Musora.

1. Container

Card Container hold all card elements. Their size is determined by the amount of content within the card. The card container is transparent with no border.

2. Header Text (Optional)

Header text should include the title of the media within the card. This text can be removed or placed in a different position depending on the purpose of the card.

3. Subhead Text (Optional)

Subhead text includes a more detailed description of the media within the card. Subhead text should not be used as paragraphs and should remain as brief as possible.

4. Supportive Text (Optional)

Supportive text can include further information about the content such as context type, level, names, dates, etc. The supportive thext should take up a maximum of one line and be separated by dashes or bullet points.

5. Media (Optional)

Cards can include a variety of a media types including photos, graphics, videos or a combination of these elements.

6. Icons

Cards can contain actionable icons. The "Add to My List" icon should always be present in the top right corner of the media section. Other icons can be added as long as they serve a purpose.

7. Avatar

Cards can contain thumbnails to display an avatar, logo, or icon. These areas are typically meant for avatars but can be customizable depending on the situation.

---

Default Card Behavior

Interactions

The cursor should change to a pointer hand icon to give the user some feedback when interacting with the cards. All cards contain hover effects that reveal the "Play" Icon and overlay a background-color of RGBA (0,0,0,.4).

Upon clicking on the "Add to My List" icon the icons changes to the brands corresponding primary color and rotates to create an "X".

Responsiveness

When presenting two or more cards horizontally or vertically, care must be taken to ensure appropriate margins are added between the cards. A cards width is fluid by default and can be adjusted depending on the screen width and situation.

---

Card Examples

Examples Coming Soon...