Cards - 图1

Cards

Cards, along with List View, is a great way to contain and orginize your information. Cards contain unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.

Card Layout

Lets look at a basic card HTML layout

  1. <div class="card">
  2. <div class="card-header">Header</div>
  3. <div class="card-content">
  4. <!-- Card content -->
  5. </div>
  6. <div class="card-footer">Footer</div>
  7. </div>
  8. <div class="card">
  9. <div class="card-header">Header</div>
  10. <div class="card-content card-content-padding">
  11. <!-- Card content -->
  12. </div>
  13. <div class="card-footer">Footer</div>
  14. </div>
  15. <div class="card card-outline">
  16. <div class="card-header">Header</div>
  17. <div class="card-content">
  18. <!-- Card content -->
  19. </div>
  20. <div class="card-footer">Footer</div>
  21. </div>

Where:

  • <div class="card"> - Card container

    • <div class="card-header"> - Card header. Mostly used to display card title. Optional

    • <div class="card-footer"> - Card footer is used for some additional information or for custom actions/links. Optional

    • <div class="card-content"> - Main container for card content. Required

    • <div class="card-content card-content-padding"> - Additional card-content-padding used to add extra padding to card-content

    • card-outline - additional class that can be added to card element to make it outline

    • no-shadow - additional class that can be added to card element to remove its shadow

    • no-border - additional class that can be added to card element to remove its border (for outline card)

Note that “card-header” and “card-footer” have a flexbox layout (display:flex) where as items have a center vertical alignment. If you need to align items to top or to bottom of header/footer, then you may use additional typography classes, for example:

- align header items by header top line