Styles and Appearances in React Card

24 Sep 20263 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 React Card

Use the following CSS to customize the React Card appearance.

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

Customizing the header element

Use the following CSS to customize the header element appearance.

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

Customizing the React Card content

Use the following CSS to customize the React Card content appearance.

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

Customizing the divider used to separate elements inside the card

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

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

Including image within React Card element

Use the following CSS to include image within React Card element.

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

Including title or caption for the image

Use the following CSS to include title or caption for the image.

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

Including heading image within the header

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

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

Customizing the header main title

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;
}

Customizing the header subtitle

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;
}

Including action buttons or anchor tags

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;
}

Aligning React Card elements horizontally

Use the following CSS to align React Card elements horizontally.

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

Aligning elements vertically within the horizontal layout

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;
}