Search results

Style and Appearance in Blazor Card component

03 Aug 2021 / 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.

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

Customizing the Header element

Use the following CSS to customize the Header element properties.

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

Customizing the card content

Use the following CSS to customize the card content properties.

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

Divider used to separate the elements inside the card

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

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

Including image within card element

Use the following CSS to Include image within card element.

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

Including a title or caption for the image

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

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

To include heading image within the header

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

Copied to clipboard
.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.

Copied to clipboard
.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.

Copied to clipboard
.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.

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

To align card elements horizontally

Use the following CSS to align card elements horizontally.

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

To align elements vertically within the horizontal layout

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

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