Web Components Card Overview

The Ignite UI for Web Components 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.

Web Components 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

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

Before using the Card, you need to register it as follows:

import { defineComponents, IgcCardComponent } from 'igniteui-webcomponents';

defineComponents(IgcCardComponent );

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

Then, to represent the demo card template, we can add the following code:

<igc-card>
    <igc-card-media>
        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
    </igc-card-media>
    <igc-card-header>
        <span slot="title">New York</span>
        <span slot="subtitle">City in New York</span>
    </igc-card-header>
    <igc-card-content>
        <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>
    </igc-card-content>
    <igc-card-actions>
        <igc-button slot="start">
            <igc-ripple></igc-ripple>
            Read more
        </igc-button>
        <div slot="end">
            <igc-icon-button name="twitter" style="margin-right: 10px;">
                <igc-ripple></igc-ripple>
            </igc-icon-button>
            <igc-icon-button name="facebook">
                <igc-ripple></igc-ripple>
            </igc-icon-button>
        </div>
    </igc-card-actions>
</igc-card>

You will notice a few things above. First, to tag an element as a header title, we need to place it between the CardHeader tags and set its slot name to title. Conversely, to define a subtitle, we need to set the slot name to subtitle. When slotting content into the title and subtitle slots, we recommend using <span> rather than heading elements (<h1>–<h6>). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component’s intended typography and layout. A <span> provides a neutral container that inherits the component’s styles cleanly.

Any image or video we want to show in the card, we wrap inside the CardMedia tags. The CardMedia 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 CardContent tags. Usually text goes there.

Finally, the CardActions is where you’d place any actionable items, like buttons.

Media, Thumbs, and Avatars

If you want to display an image or icon in the card header next to the title and subtitle, assign the element’s slot attribute to thumbnail. For the best results, we recommend using an igc-avatar component for the thumbnail slot, as it integrates seamlessly with the card header’s layout and styling.

Taking the card above as an example, we can edit the contents of the CardHeader and add an avatar with slot="thumbnail":

<igc-card-header>
    <igc-avatar slot="thumbnail" src="path/to/image" initials="TS"></igc-avatar>
    <span slot="title">Title</span>
    <span slot="subtitle">Subtitle</span>
</igc-card-header>

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 laid 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:

<igc-card outlined>
    <div class="card-horizontal">
        <div>
            <igc-card-header>
                <img src="ROZES-Under-the-Grave.jpg" slot="thumbnail">
                <span slot="title">Rozes</span>
                <span slot="subtitle">Under the Grave (2016)</span>
            </igc-card-header>
            <igc-card-content>
                <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>
            </igc-card-content>
        </div>
        <div class="divider"></div>
        <igc-card-actions>
            <igc-icon-button name="previous"></igc-icon-button>
            <igc-icon-button name="play"></igc-icon-button>
            <igc-icon-button name="next"></igc-icon-button>
        </igc-card-actions>
    </div>
</igc-card>

We are using an additional div element to bundle the CardHeader and CardContent 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 Card.

Below is an example showing how you can create a semi-horizontal card, where we have every section of the card laid out vertically, while the CardMedia appears alongside the vertical sections.

<igc-card>
    <div class="semi-horizontal">
        <div>
            <igc-card-header>
                <igc-avatar src="mellow_d.jpg" slot="thumbnail">MD</igc-avatar>
                <span slot="title">HERE</span>
                <span slot="subtitle">by Mellow D</span>
            </igc-card-header>
            <igc-card-content>
                <p>Far far away, behind the word mountains,
                    far from the countries Vokalia and Consonantia,
                    there live the blind texts.</p>
            </igc-card-content>
            <igc-card-actions>
                <igc-button>play album</igc-button>
            </igc-card-actions>
        </div>
        <igc-card-media class="card-media">
            <img src="here_media.jpg">
        </igc-card-media>
    </div>
</igc-card>

.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. The area is intended to hold actionable items, like buttons. There are two slots available that can be used to position content: start and end. We can assign these slots to any element placed inside the CardActions, and it will be positioned accordingly, either at the start or the end of the area. These slots can be used with any type of content, but we highly recommend sticking to actionable elements, or wrappers of actionable elements, as shown in the example below:

<igc-card-actions>
    <igc-button slot="end">
        <igc-ripple></igc-ripple>
        Read more
    </igc-button>
    <div slot="start">
        <igc-icon-button name="twitter">
            <igc-ripple></igc-ripple>
        </igc-icon-button>
        <igc-icon-button name="facebook">
            <igc-ripple></igc-ripple>
        </igc-icon-button>
    </div>
</igc-card-actions>

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 is done by styling its building blocks - the CardHeader, CardContent, CardMedia and CardActions sub-components.

igc-card {
  background-color: var(--ig-secondary-900);
}

igc-card-content,
igc-card-header::part(title) {
  color: var(--ig-primary-500-contrast);
}

igc-card-header > *[slot="subtitle"] {
  color: var(--ig-warn-500);
  opacity: 0.9;
}

igc-icon-button::part(base) {
  background-color: var(--ig-primary-300);
}

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 Web Components 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

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub