Basic Card

This sample demonstrates to rendering the Card with below different layouts. A business card can be flip(rotate) while clicking and focus-out, Detailed card hidden content can be revealed while clicking the forward icon.
More Details...


Card is a small container in which user can show defined content in specific structure and it is a flexible and extensible. More information about Card can be found in this documentation section. Card can be customized based on the following sections. Types Description Heading and Content Create a div element and add an e-card-header class and for adding Heading and sub-heading section to header use e-card-header-caption. Further with this you can add images to the header using e-card-header-image. Image and Title Images can be added to the card structure with e-card-image CSS class and you can also add title to the images using e-card-title class. Action Buttons You can include buttons within the card and customize them by adding the div element with e-card-actions class followed by button tag or anchor tag with e-card-btn class. Horizontal Card By default, card elements are stacked one after another vertically as in the DOM. You can customize the card with specific direction by adding e-card-horizontal, to make elements align horizontally. Using e-card-stacked class, you can split the horizontal layout with a stacked element on left/right of the card.