HelpBot Assistant

How can I help you?

Header content in Vue Card component

5 Mar 202611 minutes to read

A Card can include a header with a title, subtitle, and image. Add a header by creating a div element with the e-card-header class.

Card provides the following header elements and corresponding class definitions.

Elements Description
Caption It is the wrapper element to include title and sub-title.
Image It supports to include header images with the specified dimensions.
Class Description
e-card-header-caption To group the title and subtitle within the header which acts as wrapper.
e-card-header-title Main title text with in the header.
e-card-sub-title A sub-title within the header.
e-card-header-image To include heading image within the header.
e-card-corner To add rounded corner for the image.

Title and Subtitle

To add a header caption, create a wrapper div with the e-card-header-caption class.

  • Place a div with the e-card-header-title class inside the header caption to add the main title.

  • Place a div with the e-card-sub-title class inside the header caption to add the subtitle.

Image

The Card header supports adding images. The header image can be positioned before or after the header caption depending on its placement in the header markup.

  • Add a div with the e-card-header-image class to include a header image; place it before or after the caption wrapper as needed.
<template>
    <div id="app">
        <div style="margin: 50px;">
            <div tabindex="0" class="e-card">
                <div class="e-card-header">
                    <div class="e-card-header-image football e-card-corner"></div>
                    <div class="e-card-header-caption">
                        <div class="e-card-header-title"> Laura Callahan</div>
                        <div class="e-card-sub-title">Sales Coordinator and Representative</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-left: 50px;margin-top:30px">
            <div tabindex="0" class="e-card">
                <div class="e-card-header">
                    <div class="e-card-header-caption">
                        <div class="e-card-header-title"> Laura Callahan</div>
                        <div class="e-card-sub-title">Sales Coordinator and Representative</div>
                    </div>
                    <div class="e-card-header-image football"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css';

.e-card .e-card-header .e-card-header-image.football {
    background-image: url('./football.png');
}

.e-card {
    width: 300px
}
</style>
<template>
    <div id="app">
        <div style="margin: 50px;">
            <div tabindex="0" class="e-card">
                <div class="e-card-header">
                    <div class="e-card-header-image football e-card-corner"></div>
                    <div class="e-card-header-caption">
                        <div class="e-card-header-title"> Laura Callahan</div>
                        <div class="e-card-sub-title">Sales Coordinator and Representative</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-left: 50px;margin-top:30px">
            <div tabindex="0" class="e-card">
                <div class="e-card-header">
                    <div class="e-card-header-caption">
                        <div class="e-card-header-title"> Laura Callahan</div>
                        <div class="e-card-sub-title">Sales Coordinator and Representative</div>
                    </div>
                    <div class="e-card-header-image football"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css';

.e-card .e-card-header .e-card-header-image.football {
    background-image: url('./football.png');
}

.e-card {
    width: 300px
}
</style>

Content

Card content can contain text, images, links, and other HTML elements. Its adaptable within the Card root element.

  • Create a div element with the class e-card-content.
  • Place content div element in the Card root element or within any Card inner elements.
<template>
  <div id="app">
    <div tabindex="0" class="e-card">
      <div class="e-card-header">
        <div class="e-card-header-image football"></div>
        <div class="e-card-header-caption">
          <div class="e-card-header-title"> Laura Callahan</div>
          <div class="e-card-sub-title">Sales Coordinator and Representative</div>
        </div>
      </div>
      <div class="e-card-content">
        Laura received a BA in psychology from the University of Washington. She has also completed a course in business
        French. She reads and writes French.
      </div>
    </div>
  </div>
</template>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css';

.e-card .e-card-header .e-card-header-image.football {
  background-image: url('./football.png');
}

.e-card {
  width: 300px
}
</style>
<template>
  <div id="app">
    <div tabindex="0" class="e-card">
      <div class="e-card-header">
        <div class="e-card-header-image football"></div>
        <div class="e-card-header-caption">
          <div class="e-card-header-title"> Laura Callahan</div>
          <div class="e-card-sub-title">Sales Coordinator and Representative</div>
        </div>
      </div>
      <div class="e-card-content">
        Laura received a BA in psychology from the University of Washington. She has also completed a course in business
        French. She reads and writes French.
      </div>
    </div>
  </div>
</template>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css';

.e-card .e-card-header .e-card-header-image.football {
  background-image: url('./football.png');
}

.e-card {
  width: 300px
}
</style>