Styles and Appearances in JavaScript (ES5) Card control

08 May 2023 / 2 minutes to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference.

Customizing the card

Use the following CSS to customize the card properties.

.e-card {
    background-color: aqua;
    padding-left: 20px;
    margin-bottom: 20px;
}

Use the following CSS to customize the Header element properties.

.e-card .e-card-header {
    font-family: cursive;
    font-style: italic;
}

Use the following CSS to customize the card content properties.

.e-card .e-card-content {
    font-size: 20px;
    color: gray;
    line-height: initial;
    font-weight: normal;
}

Use the following CSS to customize the Divider used to separate the elements inside the card properties.

.e-card .e-card-separator {
   padding-bottom: 30px;
}

Use the following CSS to Include image within card element.

.e-card .e-card-image {
    background-image: url(images.png);
    background-color: yellow;
    height: 160px;
}

Use the following CSS to Include a title or caption for the image.

.e-card .e-card-image .e-card-title {
    font-family: cursive;
    font-style: italic;
}

Use the following CSS to Include heading image within the header.

.e-card .e-card-header .e-card-header-image  {
    height: 48px;
    width: 48px;
}

Use the following CSS to Customize the Header main title.

.e-card .e-card-header .e-card-header-caption .e-card-header-title  {
    font-size: large;
    color: aquamarine;
}

Use the following CSS to Customize the Header subtitle.

.e-card .e-card-header .e-card-header-caption .e-card-sub-title  {
    font-size: 20px;
    font-variant: all-petite-caps;
}

Use the following CSS to Include action buttons or anchor tags.

.e-card .e-card-actions .e-card-btn  {
    padding-left: 20px;
    background-color: wheat;
}

Use the following CSS to align card elements horizontally.

.e-card .e-card-horizontal  {
    margin: auto;
    width: inherit;
}

Use the following CSS to align elements vertically within the horizontal layout.

.e-card .e-card-horizontal .e-card-stacked  {
    justify-content: flex-start;
    margin: initial;
}

Contents

Contents