Blazor Card Overview
The Ignite UI for Blazor Card displays text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information. Cards can be used to create a multimedia dashboard.
Blazor Card Example
Usage
Cards allow you to easily display content composed of different types of objects or similar objects whose size and supported actions can vary.
Getting Started
Before using the IgbCard
, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule));
You will also need to link an additional CSS file to apply the styling to the IgbCard
component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
For a complete introduction to the Ignite UI for Blazor, read the Getting Started topic.
Then, to represent the demo card template, we can add the following code:
<IgbCard>
<IgbCardMedia>
<img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
</IgbCardMedia>
<IgbCardHeader>
<h3 slot="title">New York City</h3>
<h5 slot="subtitle">City in New York</h5>
</IgbCardHeader>
<IgbCardContent>
<p>New York City comprises 5 boroughs sitting where the
Hudson River meets the Atlantic Ocean. At its core is Manhattan,
a densely populated borough that's among the world's major commercial,
financial and cultural centers.</p>
</IgbCardContent>
<IgbCardActions>
<IgbButton slot="start">
<IgbRipple />
Read more
</IgbButton>
<div slot="end">
<IgbIconButton name="twitter" >
<IgbRipple />
</IgbIconButton>
<IgbIconButton name="facebook" >
<IgbRipple />
</IgbIconButton>
</div>
</IgbCardActions>
</IgbCard>
You will notice a few things above. First, when we want to tag an element as a header title, like the h3
heading, we place it between the IgbCardHeader
tags and set its slot name to title
. Conversely, if we wanted to make another heading element a subtitle
we would name its slot subtitle
.
Any image or video we want to show in the card, we wrap inside the IgbCardMedia
tags. The IgbCardMedia
allows us to size the content placed inside so that it maintains its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
You can place anything inside the IgbCardContent
tags. Usually text goes there.
Finally, the IgbCardActions
is where you'd place any actionable items, like buttons.
Media, Thumbs, and Avatars
If you want to show an image or icon in the card header next to the title and subtitle, you can do it by assigning the element's slot property to thumbnail
.
Taking the card above as an example, we can edit the contents of the IgbCardHeader
and add an avatar with slot="thumbnail"
:
<IgbCardHeader>
<IgbAvatar slot="thumbnail" Src="path/to/image" Initials="TS" />
<h3 slot="title">Title</h5>
<h5 slot="subtitle">Subtitle</h5>
</IgbCardHeader>
The above example will show the avatar alongside the title and subtitle in the card header.
Outlined cards
The card has an outlined
attribute which, if set, removes any shadows from the card, replacing them with a thin border to separate the card from the background.
Horizontal Layout
By default all sections of the card (header, content, media, actions) are layed out vertically. This is nice when we have a lot of vertical space. Say we wanted to lay out the sections in the card horizontally. We can achieve such a layout with some simple CSS.
Here's an example of an outlined horizontal card:
<IgbCard>
<div class="card-horizontal">
<div>
<IgbCardHeader>
<img slot="thumbnail" src="ROZES-Under-the-Grave.jpg" />
<h5 slot="title">Rozes</h5>
<h5 slot="subtitle">Under the Grave (2016)</h5>
</IgbCardHeader>
<IgbCardContent>
<p>
As I have always said: I write what's real and what's true,
even if it means throwing myself under the bus.
</p>
</IgbCardContent>
</div>
<div class="divider"></div>
<IgbCardActions>
<IgbIconButton Name="previous" />
<IgbIconButton Name="play" />
<IgbIconButton Name="next" />
</IgbCardActions>
</div>
</IgbCard>
We are using an additional div
element to bundle the IgbCardHeader
and IgbCardContent
together, keeping them aligned vertically, and applying the .card-horizontal
class to the wrapping div
element to align the two sections of the card horizontally.
The styles that .card-horizontal
class applies are:
.card-horizontal {
display: flex;
flex-direction: row;
flex: 1 1 0%;
}
.card-horizontal img {
width: 64px;
height: 64px;
}
.card-horizontal igc-card-actions {
justify-content: center;
}
If everything went well, our card should look like this:
Alternative layouts
You can get even more creative with the layout of the IgbCard
.
Below is an example showing how you can create a semi-horizontal card, where we have every section of the card layed out vertically, while the IgbCardMedia
appears alongside the vertical sections.
<IgbCard>
<div class="semi-horizontal">
<div>
<IgbCardHeader>
<IgbAvatar slot="thumbnail" src/>
<h5 slot="title">HERE</h5>
<h5 slot="subtitle">by Mellow D</h5>
</IgbCardHeader>
<IgbCardContent>
<p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p>
</IgbCardContent>
<IgbCardActions>
<IgbButton>Play Album</IgbButton>
</IgbCardActions>
</div>
<IgbCardMedia class="card-media">
<img src="here_media.jpg" />
</IgbCardMedia>
</div>
</IgbCard>
.semi-horizontal {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.card-media {
width: 96px;
min-width: 96px;
}
Card Actions
The card actions area allows additional configuration to what we have already mentioned.
You can reverse the order of the text button and the icon buttons by switching their slot names.
<IgbCardActions>
<IgbButton slot="start">
<IgbRipple />
Read more
</IgbButton>
<div slot="end">
<IgbIconButton name="twitter">
<IgbRipple />
</IgbIconButton>
<IgbIconButton name="facebook" >
<IgbRipple />
</IgbIconButton>
</div>
</IgbCardActions>
Now the icon buttons will appear before the text button.
You can also add more content in-between by simply omitting the slot property and let the elements go to the default slot.
Styling
Since the card is a container that wraps different elements, styling it is done by styling its building blocks - the header, content, media and actions sub-components. In addition, the header
component (IgbCardHeader
) exposes three CSS parts - header
, title
and subtitle
that allow you to style the wrapping element as well as the two title elements.
igc-card {
background-color: #011627;
}
igc-card-content,
igc-card-header::part(title) {
color: #FEFEFE;
}
igc-card-header::part(subtitle) {
color: #ECAA53;
opacity: 0.9;
}
igc-icon-button+igc-icon-button {
margin-left: 10px;
}
Summary
In this article we covered a lot of ground with the card component. We created a simple card and added some images to make it a bit more appealing. We used some additional Blazor inside our card, like avatars, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's appearance by changing the major colors of the building blocks.
API References
IgbAvatar
IgbButton
IgbCardActions
IgbCardContent
IgbCardHeader
IgbCardMedia
IgbCard
IgbIconButton
IgbIcon