A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.

Using CardTitle

With CardText

The CardText component is really just useful for displaying any content with some additional padding.

This example shows how you can use the Card components alongside the Media components to display images or videos in a card.

Nature from lorempixel

Such nature


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut eleifend odio. Vivamus quis quam eget augue facilisis laoreet. Aliquam egestas turpis pellentesque cursus porta. Vivamus nisl odio, maximus vel lacinia non, suscipit quis nibh. Sed et lacus tempor, interdum nisl ornare, feugiat arcu. Suspendisse aliquam malesuada dui, in dignissim velit maximus vitae. Cras ac mattis libero. Proin feugiat justo nec nisi sodales, et gravida augue faucibus. Maecenas quis porttitor nunc. Suspendisse congue ipsum arcu, id aliquam ante dignissim non. Donec maximus, sapien in faucibus molestie, eros nisi ornare neque, et vulputate augue velit vel ante. Phasellus rhoncus, elit cursus accumsan viverra, mi lectus dictum elit, non vehicula diam nunc non lectus. Sed elementum, risus eget fermentum accumsan, nunc ante commodo diam, eget pulvinar risus velit eu sapien. Nunc vitae pellentesque nisl.

Maecenas lacinia enim ut risus pellentesque euismod. Vestibulum gravida, risus non condimentum volutpat, orci elit laoreet elit, in auctor eros orci non quam. Proin ut tellus et est dignissim efficitur. Aliquam erat volutpat. Proin pellentesque metus sit amet libero auctor aliquet. Donec scelerisque erat in magna sagittis hendrerit. Sed pulvinar enim mattis mauris sodales semper. Mauris eu urna at arcu dapibus pretium et in ligula. Sed vel vestibulum nunc.


Highway to the Dangerzone


Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

Only the CardTitle and CardActions have built-in support to act as expanders by injecting an icon button to toggle the expansion when the expander prop is enabled. When the user clicks the expander icon, any following top-level components that have expandable enabled on them will be collapsed/visible.

Card Title

Card Subtitle

San Francisco

Thu 12:30 PM, Mostly Sunny


  • 21 km/h
  • 48%

  1. Tuesday
  2. Wednesday
  3. Thursday