YouTip

In recent years, the use of cards has become increasingly popular. Cards provide a better tool for organizing and displaying information. For mobile applications, cards adapt their size according to the screen dimensions. We can flexibly control the display effects of cards, even implementing animation effects. Cards are typically placed at the top of a page, but it's also possible to implement left-right switching functionality. [Try it »](#) Cards have a default style with a box-shadow. For performance reasons, similar elements like `list` and `list-inset` do not have shadows. If you have many cards, each with many child elements, it is recommended to use an inset list. * * * ## Card Header and Footer We can add a header and footer to a card by adding the `item-divider` class: [Try it »](#) * * * ## Card List Use the `list card` class to create a card list: [Try it »](#) * * * ## Card with Image Using images in cards can enhance the effect. Here is an example: [Try it »](#) The rendered effect is as follows: * * * ## Card Showcase The following example demonstrates several different card display options. It starts with the `list card` element, uses `item-avatar` and `item-body` elements to display images and text information, and uses the `item-divider` class for the footer. [Try it »](#) The rendered effect is as follows: