The card control is a small container in which users can show defined content in specific structure. It is a pure CSS component built with markup and styles.
Add header area that consists of title, sub-title, and avatar image to the card. You can have an avatar image in a rounded or squared shape positioned to the left/right side of the header.
The primary content area in the card can be loaded, and this can also hold text, images, links, and HTML elements.
Action elements such as buttons, anchor links, and more can added within the card. This can be aligned vertically or horizontally. Actions such as share, like and redirect can be performed.
You can add custom images as card elements to act as the background cover to the entire container. You can also provide caption text within images in any one of the four corners.
Separate the card elements area by adding a horizontal line that is adapted to the parent element. Organized content can be viewed for visual representation.
Card elements can be customized to align horizontally. By default, card elements are aligned vertically.
You can align specific sections of horizontal cards vertically.
You can create advanced cards such as flip, reveal, and swipe-able cards. These are used to reveal more information, to save space, and to see hidden contents.
Card container by default fits the horizontal and vertical contents of different screens.
Form the collection of cards at application level using data binding. Custom actions like filtering and searching can be performed using the concept of data binding.
Different collections of cards can be generated with the help of defined HTML templates to simplify rendering in application.
The elements of the card can be used in any order within it. That is, header, content, divider, images and action buttons can be used vertically in any order within card.
The background of the card can be customized with images or different color variations.