react-md - Card - Demos
Table of Contents
Simple Example
Cards are usually used to show some basic information and then allow the user to interact with it to show more data. The size of the card is determined by the content within.
Main Title
Duis lacinia lectus sed enim placerat, non consequat arcu tincidunt. Pellentesque vel condimentum lorem. Cras et arcu nibh. Cras euismod lectus commodo finibus facilisis. Sed ullamcorper odio sed scelerisque semper. Donec sollicitudin lorem eget tincidunt efficitur. Aenean sit amet tempus lacus, sit amet semper justo. Sed quis suscipit ante. Etiam aliquam risus eu laoreet placerat.
Main Title
Subtitle
Duis pellentesque, ligula vel convallis tincidunt, arcu enim cursus leo, sit amet euismod eros tellus vel nisi. Quisque ultrices elementum nisi id pulvinar. Vivamus ac posuere mauris, vitae aliquet massa. Donec semper vestibulum odio sit amet aliquam. Nullam sed pellentesque risus, condimentum vulputate quam. Donec sed lacinia nisl. Donec convallis risus a placerat pellentesque.
Card Title
Card subtitle
Proin eget lacinia sem. Curabitur viverra, ex ac vulputate malesuada, risus justo pharetra lectus, id gravida metus diam et nisi. Fusce semper eu magna sit amet interdum. Phasellus fringilla in elit auctor sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed facilisis enim ut leo euismod dapibus. Curabitur neque urna, ullamcorper ac nibh in, vehicula varius orci. Nunc lacinia magna eget dolor eleifend, eu dapibus lacus suscipit. Pellentesque sollicitudin mi sagittis magna fringilla luctus sit amet quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue nunc elit, ac commodo orci laoreet at. Quisque libero erat, ultricies quis neque ut, blandit laoreet nibh. Phasellus sagittis lobortis ipsum, vitae maximus quam auctor sit amet. Quisque ut lobortis purus.
Bordered Card
Maecenas eleifend, ligula rhoncus blandit molestie, magna nulla aliquet neque, non efficitur felis mi sed lorem. Suspendisse sed pharetra nulla, mattis cursus odio. Proin molestie augue quis pharetra euismod. Donec vulputate mattis velit, a pellentesque metus consequat in. Duis aliquam vitae magna at aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Integer facilisis vel mauris non lobortis. Cras cursus semper gravida. Morbi a scelerisque ante. Aenean sed justo nec justo rutrum pretium. In hac habitasse platea dictumst. Proin nibh massa, scelerisque sed mauris vel, dictum faucibus tortor. Cras elit eros, scelerisque a accumsan eget, vulputate sed nisi.
With Media
Another main use case for cards is to display some sort of media along with a
description. You can use the @react-md/media package with this to handle making
responsive media and create custom overlays with the CardTitle.
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.
With Actions
Since a user normally interacts with the content of a card, you can also apply
actions using the CardActions component. This is normally used alongside the
Button component from @react-md/button as the CardActions just applies some simple
padding and flex behavior.
This example will also show how cards can be "raisable" so that when a desktop user can hover the card to raise the elevation.
This is a title
Sed molestie finibus varius. Maecenas tincidunt eu quam eget sodales. Fusce ut lacus luctus, aliquam erat eu, fringilla libero. Nulla rhoncus mi nec orci ultricies ultricies. Aenean et hendrerit velit. Curabitur condimentum a tortor sit amet porttitor. Sed ut neque eget massa feugiat ullamcorper. Sed quis vulputate mi, imperdiet egestas diam. Nullam rutrum nisl sed mi posuere commodo. Nulla eleifend interdum euismod. Suspendisse sit amet rutrum lorem, nec aliquet tellus. Nam non massa imperdiet, vehicula diam nec, efficitur turpis. In non suscipit tellus. Vivamus ac volutpat velit, sit amet faucibus nisi. Pellentesque condimentum dignissim augue, sit amet porta ipsum feugiat nec.
Expandable Cards
Another common pattern is to create expandable cards so that the base information is available at the beginning, but more can be viewed afterwards. This can be accomplished by using:
CardActionscomponent with aButtonto handle toggling the visibility and base layoutCollapsecomponent from @react-md/transition to handle the expand and collapse animationsuseTogglehook from @react-md/utils to handle the visibility state
If you used
react-mdin the past, you'll notice that this is a lot different than the previous behavior of being able to addexpandableto differentCardparts. It ended up causing a lot of problems and had less flexibility, so I am now exposing just the base components and utils so you have all the control as needed.