Skip to content

Component library

Card component

Last updated 2 November 2026

Creates a card / wrapper element.

Live demo

<ins-card 
  steady 
  no-padding
  tooltip="This is a sample tooltip content. It also support html content.">

  <ins-heading 
    label="Hello World">
  </ins-heading>

  <p>This is a sample card without padding and set to steady.</p>

</ins-card>

Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
steady boolean false true, false Disables the card hover animation
no-padding boolean false true, false Removes left and right padding

Examples

Card - v2 Complete Example 2

<ins-card 
  steady 
  no-padding
  tooltip="This is a sample tooltip content. It also support html content.">

  <style>
    .padding-wrap { padding: 20px; }
  </style>

  <div class="padding-wrap">
 
   <ins-heading label="Hello World"></ins-heading>

    <p>This is a sample card without padding and set to steady.</p>
    <p>Wrappers set the inner padding to fully extend <code>hr</code></p>

  </div>

  <hr>

  <div class="grid-x grid-padding-x grid-padding-y">

    <div class="cell large-6 small-12">

      <p>Additional content here</p>

    </div>

    <div class="cell large-6 small-12 text-right">

      <ins-button 
        solid 
        label="Button">
      </ins-button>

    </div>

  </div>

</ins-card>

Default State

<ins-card></ins-card>

Steady State

<ins-card 
  steady>

  <ins-heading 
    label="Hello World">
  </ins-heading>

  <p>This is a sample steady card.</p>
  <p>No hover animations</p>

</ins-card>