Card

Last updated on August 02, 2024.

Element: <ins-card>

Creates a card / wrapper element.

Complete Example

This is a sample card without padding and set to steady.

Code Snippet

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

This is a sample card without padding and set to steady.

Wrappers set the inner padding to fully extend hr

Additional content here

Code Snippet

<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

Code Snippet

<ins-card></ins-card>

Steady State

This is a sample steady card.

No hover animations

Code Snippet

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

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

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.