HelpBot Assistant

How can I help you?

Card image in Vue Card component

5 Mar 20269 minutes to read

Images

The Card supports to include images within the elements, you can add image as direct element anywhere inside card root by adding the
e-card-image class to div element. Using the class defined, you can write CSS styles to load images to that element.

By default, card images occupy the full width of their parent element.

    <div class = "e-card">
        <div class="e-card-image">
        </div>
    </div>

Title

Card images can include a title or caption. By default, the title is placed over the image at the bottom-left position with an overlay.

    <div class = "e-card">
        <div class="e-card-image">
            <div class="e-card-title"></div>
        </div>
    </div>

<template>
  <div id="app">
      <div class="e-card">
          <div class="e-card-image">
              <div class="e-card-title">JavaScript </div>
          </div>
          <div class="e-card-content"> JavaScript Succinctly was written to give readers an accurate, concise
              examination of JavaScript objects and their supporting nuances, such as complex values, primitive
              values, scope, inheritance, the head object, and more. </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-image {
  background: url('./sample.jpg');
  height: 160px;
  ;
}

.e-card {
  width: 300px;
  margin: auto;
}
</style>
<template>
  <div id="app">
    <div class="e-card">
      <div class="e-card-image">
        <div class="e-card-title">JavaScript </div>
      </div>
      <div class="e-card-content"> JavaScript Succinctly was written to give readers an accurate, concise examination of
        JavaScript objects and their supporting nuances, such as complex values, primitive values, scope, inheritance,
        the head object, and more. </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-image {
  background: url('./sample.jpg');
  height: 160px;
  ;
}

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

Divider

Use a divider to separate elements inside the card.

  • Add a div with the e-card-separator class inside the card element to insert a divider.
<template>
    <div id="app">
        <div tabindex="0" class="e-card" id="basic">
            <div class="e-card-title">Explore Cities</div>
            <div class="e-card-separator"></div>
            <div class="e-card-content">
                Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About
                four million people
                live in Sydney which makes it the biggest city in Oceania.
            </div>
            <div class="e-card-separator"></div>
            <div class="e-card-content">
                New York City has been described as the cultural, financial, and media capital of the world, and exerts
                a significant impact
                upon commerce and etc.,
            </div>
            <div class="e-card-separator"></div>
            <div class="e-card-content">
                Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain
                extent; it can be recognized
                as part of the Asian continent.
            </div>
        </div>
    </div>
</template>

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

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.e-card {
    width: 300px
}
</style>
<template>
    <div id="app">
         <div tabindex="0" class="e-card" id="basic">
              <div class="e-card-title">Explore Cities</div>
              <div class="e-card-separator"></div>
              <div class="e-card-content">
                  Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people
                  live in Sydney which makes it the biggest city in Oceania.
              </div>
              <div class="e-card-separator"></div>
              <div class="e-card-content">
                  New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact
                  upon commerce and etc.,
              </div>
              <div class="e-card-separator"></div>
              <div class="e-card-content">
                  Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized
                  as part of the Asian continent.
              </div>
          </div>
    </div>
  </template>
  
  <style>
    @import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
    @import '../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css';
  
  #container {
      visibility: hidden;
  }
  
  #loader {
      color: #008cff;
      height: 40px;
      left: 45%;
      position: absolute;
      top: 45%;
      width: 30%;
  }
  .e-card {
      width: 300px
  }
  </style>

See Also