Style and Appearance in Blazor Card Component
29 Jul 20213 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;
}
Customizing the Header element
Use the following CSS to customize the Header element properties.
.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.
.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.
.e-card .e-card-separator {
padding-bottom: 30px;
}
Including image within card element
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;
}
Including a title or caption for the image
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;
}
To include 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;
}
To align card elements horizontally
Use the following CSS to align card elements horizontally.
.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.
.e-card .e-card-horizontal .e-card-stacked {
justify-content: flex-start;
margin: initial;
}