Card

<tpg-card></tpg-card>

Usage

The Ultimate Card is the best component you’ve ever seen and you’ll probably ever see.

It looks complicated because it is complicated, but so it’s every masterpiece at the pinnacle of its field.

However if you can’t figure out how to use it you should be ashamed of being called a designer (or a developer).

Bask in the glory of The Ultimare Card.

— Davide

Guidelines

The Ultimate Cards scale in width to the parent container, and in height by their content.

• min-width: 344px
• height: fit-content

Do´s

A card function is to show an at-glance overview of essential, aggregated information.

Dont´s

Avoid filling the card with non-necessary functions, states, and secondary information. It’s best not to used a visually unalligned grid that can impair readability.

Examples

Card - default (with background)

Added some text to the primary-label, secondary-label, header and subtitle attributes.

Component

Unselected

Selected

Vanilla JS

      <tpg-card
        primary-label="Card primary label"
        secondary-label="Card secondary label"
        heading="heading"
        subtitle="subtitle">
      </tpg-card>

      <tpg-card
        primary-label="Card primary label"
        secondary-label="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        selected>
      </tpg-card>

React

      <tpg-card
        primaryLabel="Card primary label"
        secondaryLabel="Card secondary label"
        heading="heading"
        subtitle="subtitle">
      </tpg-card>

      <tpg-card
        primaryLabel="Card primary label"
        secondaryLabel="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        selected>
      </tpg-card>

Card state - no-background

Added some text to the primary-label, secondary-label, header and subtitle attributes.

Component

Unselected

Selected

Vanilla JS

      <tpg-card
        primary-label="Card primary label"
        secondary-label="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        no-background>
      </tpg-card>

      <tpg-card
        primary-label="Card primary label"
        secondary-label="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        no-background
        selected>
      </tpg-card>

React

      <tpg-card
        primaryLabel="Card primary label"
        secondaryLabel="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        no-background>
      </tpg-card>

      <tpg-card
        primaryLabel="Card primary label"
        secondaryLabel="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        noBackground
        selected>
      </tpg-card>

Card state - read-only

Added some text to the primary-label, secondary-label, header and subtitle attributes.

Component

Unselected

Selected

Vanilla JS

      <tpg-card
        primary-label="Card primary label"
        secondary-label="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        read-only>
      </tpg-card>

      <tpg-card
        primary-label="Card primary label"
        secondary-label="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        read-only
        selected>
      </tpg-card>

React

      <tpg-card
        primaryLabel="Card primary label"
        secondaryLabel="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        readOnly>
      </tpg-card>

      <tpg-card
        primaryLabel="Card primary label"
        secondaryLabel="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        readOnly
        selected>
      </tpg-card>

Current Item Indicator

You can toggle the Current Item Indicator using the current-indicator flag.

Component

Vanilla JS

      <tpg-card
        primary-label="<- Current Item Indicator"
        secondary-label="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        current-indicator
        read-only
      >
      </tpg-card>

React

      <tpg-card
        primaryLabel="<- Current Item Indicator"
        secondaryLabel="Card secondary label"
        heading="heading"
        subtitle="subtitle"
        currentIndicator
        readOnly
      >
      </tpg-card>

Slots

Filling all slots with some content. Added some text to the primary-label, secondary-label, header and subtitle props.

Component

With slot="header-leading-buttons"

With slot="header-trailing-buttons"

With slot="header-stuff"

With slot="header-stuff", slot="header-trailing-buttons", and slot="header-leading-buttons"

With slot="card-row-1"

With slot="card-row-1" & slot="card-row-2"

All slots used

Header Stuff

stuff

stuff

Vanilla JS

<script>
  const elements = document.querySelectorAll('.has-placeholder-icon');

  for (const element of elements){
    const item = element as QuaternaryButton;
    item.iconTemplate = tpgIconPlaceholderCustom;
  }
</script>


/* With slot="header-leading-buttons" */
<tpg-card
  primary-label="Card primary label"
  secondary-label="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-leading-buttons" style="display: flex; align-items: center; justify-content: center;">
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
  </div>
</tpg-card>

/* With slot="header-trailing-buttons" */
<tpg-card
  primary-label="Card primary label"
  secondary-label="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-trailing-buttons" style="display: flex; align-items: center; justify-content: center;">
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
  </div>
</tpg-card>

/* With slot="header-stuff" */
<tpg-card
  primary-label="Card primary label"
  secondary-label="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-stuff" style="display: flex; align-items: center; justify-content: center;">
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
  </div>
</tpg-card>

/* With slot="header-stuff", slot="header-trailing-buttons", and slot="header-leading-buttons" */
<tpg-card
  primary-label="Card primary label"
  secondary-label="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-leading-buttons" style="display: flex; align-items: center; justify-content: center;">
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
  </div>

  <div slot="header-stuff" style="width: 100%; display: flex; align-items: center; justify-content: center;">
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
  </div>

  <div slot="header-trailing-buttons" style="display: flex; align-items: center; justify-content: center;">
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button  class="has-placeholder-icon"></tpg-quaternary-button>
  </div>
</tpg-card>

/* With slot="card-row-1" */
<tpg-card
  primary-label="Card primary label"
  secondary-label="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="card-row-1" style="display: flex; align-items: center; justify-content: center; gap: 4px;">
    <tpg-primary-button label="Card row 1"></tpg-primary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-primary-button type="danger" label="Anything goes"></tpg-primary-button>
  </div>
</tpg-card>

/* With slot="card-row-1" & slot="card-row-2" */
<tpg-card
  primary-label="Card primary label"
  secondary-label="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="card-row-1" style="display: flex; align-items: center; justify-content: center; gap: 4px;">
    <tpg-primary-button label="Card row 1"></tpg-primary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-primary-button type="danger" label="Anything goes"></tpg-primary-button>
  </div>
  <div slot="card-row-2" style="display: flex; align-items: center; justify-content: center; gap: 4px;">
    <tpg-primary-button label="Card row 2"></tpg-primary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-primary-button type="danger" label="Anything goes"></tpg-primary-button>
  </div>
</tpg-card>

/* All slots used */
<tpg-card
  primary-label="Card primary label"
  secondary-label="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div style="display: flex;" slot="header-leading-buttons">
    <tpg-quaternary-button
      class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button style="margin: 0;" class="has-placeholder-icon"></tpg-quaternary-button>
  </div>

  <div slot="header-stuff">
    <div style="width: 80%; margin-left: 10%; height: 20px; background-color: grey; color: black; display: flex; justify-content: center; align-items: center;">
      Header Stuff
    </div>
  </div>

  <div style="display: flex;" slot="header-trailing-buttons">
    <tpg-quaternary-button class="has-placeholder-icon"></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button style="margin: 0;" class="has-placeholder-icon"></tpg-quaternary-button>
  </div>

  <div slot="card-row-1">
    <div style="width: 100%; height: 100px; background-color: darkgrey; color: black;
      display: flex; justify-content: center; align-items: center;
      border-radius: 10px;">
      stuff
    </div>
  </div>
  <div slot="card-row-2">
    <div style="width: 100%; height: 100px; background-color: grey; color: black;
      display: flex; justify-content: center; align-items: center;
      border-radius: 10px;">
      stuff
    </div>
  </div>
</tpg-card>

React

/* With slot="header-leading-buttons" */
<tpg-card primaryLabel="Card primary label"
  secondaryLabel="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-leading-buttons" style={{
    display: "flex", alignItems: "center", justifyContent: "center"
  }}>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
  </div>
</tpg-card>

/* With slot="header-trailing-buttons" */
<tpg-card primaryLabel="Card primary label"
  secondaryLabel="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-trailing-buttons" style={{
    display: "flex", alignItems: "center", justifyContent: "center"
  }}>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
  </div>
</tpg-card>

/* With slot="header-stuff" */
<tpg-card primaryLabel="Card primary label"
  secondaryLabel="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-stuff" style={{
    display: "flex", alignItems: "center", justifyContent: "center"
  }}>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
  </div>
</tpg-card>

/* With slot="header-stuff", slot="header-trailing-buttons", and slot="header-leading-buttons" */
<tpg-card primaryLabel="Card primary label"
  secondaryLabel="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="header-leading-buttons" style={{
    display: "flex", alignItems: "center", justifyContent: "center"
  }}>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
  </div>

  <div slot="header-stuff" style={{
    display: "flex", alignItems: "center", justifyContent: "center"
  }}>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
  </div>

  <div slot="header-trailing-buttons" style={{
    display: "flex", alignItems: "center", justifyContent: "center"
  }}>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
  </div>
</tpg-card>

/* With slot="card-row-1" */
<tpg-card primaryLabel="Card primary label"
  secondaryLabel="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="card-row-1" style={{
    display: "flex", alignItems: "center", justifyContent: "center", gap: "4px"
  }}>
    <tpg-primary-button label="Card row 1"></tpg-primary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-primary-button type="danger" label="Anything goes"></tpg-primary-button>
  </div>
</tpg-card>

/* With slot="card-row-1" & slot="card-row-2" */
<tpg-card primaryLabel="Card primary label"
  secondaryLabel="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div slot="card-row-1" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "4px" }}>
    <tpg-primary-button label="Card row 1"></tpg-primary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-primary-button type="danger" label="Anything goes"></tpg-primary-button>
  </div>
  <div slot="card-row-2" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "4px" }}>
    <tpg-primary-button label="Card row 2"></tpg-primary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-loader></tpg-loader>
    <tpg-primary-button type="danger" label="Anything goes"></tpg-primary-button>
  </div>
</tpg-card>

/* All slots used */
<tpg-card primaryLabel="Card primary label"
  secondaryLabel="Card secondary label"
  heading="heading"
  subtitle="subtitle"
>
  <div style={{ display: "flex" }} slot="header-leading-buttons">
    <tpg-quaternary-button
      iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button style={{ margin: 0 }} iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
  </div>
  <div slot="header-stuff">
    <div style={{
      width: "80%", marginLeft: "10%", height: "20px",
      backgroundColor: "grey", color: "black", display: "flex",
      justifyContent: "center", alignItems: "center"
    }}>
      Header Stuff
    </div>
  </div>
  <div style={{ display: "flex" }} slot="header-trailing-buttons">
    <tpg-quaternary-button iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
    <tpg-divider orientation="vertical"></tpg-divider>
    <tpg-quaternary-button style={{ margin: 0 }} iconTemplate={tpgIconPlaceholderCustom}></tpg-quaternary-button>
  </div>

  <div slot="card-row-1">
    <div style={{
      width: "100%", height: "100px", backgroundColor: "darkgrey",
      color: "black",display: "flex",
      justifyContent: "center", alignItems: "center",
      borderRadius: "10px"
    }}>
      stuff
    </div>
  </div>
  <div slot="card-row-2">
    <div style={{
      width: "100%", height: "100px", backgroundColor: "darkgrey",
      color: "black",display: "flex",
      justifyContent: "center", alignItems: "center",
      borderRadius: "10px"
    }}>
      stuff
    </div>
  </div>
</tpg-card>

Tables

Properties

Attribute	Property	Description	Type	Default Value
selected	selected	Indicates if the card is in a selected state	boolean	false
no-background	noBackground	Removes the background color from the card when true	boolean	false
current-indicator	currentIndicator	Toggles visibility of Current Item Indicator	boolean	false
read-only	readOnly	Makes the card non-interactive when true	boolean	false
primary-label	primaryLabel	Main text content displayed in the card header	string	''
secondary-label	secondaryLabel	Secondary text content displayed below the primary text	string	''
heading	heading	Text displayed above the primary text	string	''
subtitle	subtitle	Text displayed below the primary text	string	''

Events

Event name	Reactjs attribute	Description
tpg-click	ontpg-click	event fired when clicking on the card

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
header-leading-buttons	html slot for adding content to the header leading buttons slot
header-trailing-buttons	html slot for adding content to the header trailing buttons slot
header-stuff	html slot for adding content to the header stuff slot
card-row-1	slot for adding content to the card-row-1 slot
card-row-2	slot for adding content to the card-row-2 slot

CSS Parts

Attribute	Description
header-stuff	part for adding styling to the header-stuff slot
card-row-1	part for adding styling to the card-row-1 slot
card-row-2	part for adding styling to the card-row-2 slot

Sandbox