Overlay Card

<tpg-overlay-card></tpg-overlay-card>

Overlay card is a customizable card component that can be used to display content such as images, text, and buttons etc.

Component behavior

The overlay card is a card-based modal that has several slots for injecting your own elements into a specified layout. It has no events of its own, and it is assumed that the consumer will add listeners of their own to the injected content. Some slots are designated for specific types of content, while a couple are for generic content. See the slots table for details.

The header also has some elements governed by properties, of which only the text attribute is mandatory, and should in all cases be set by the consumer.

On interaction, the card by default takes on a highlighted styling, which disappears when the user again interacts with another part of the page. This active state can be forced on, with a specific feedback color in the border, by setting the border-type attribute. If the consumer does this, the card is “active” until this property is falsy again, and the user doesn’t interact with the card.

Examples

Default behavior

Pink label

  <tpg-overlay-card
    class='has-leading-color_lens-icon'
    heading-label="Heading"
    label="The label"
  >

      <tpg-quaternary-button
          slot="header-leading-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-leading-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-trailing-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-trailing-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>

      <div slot="header-generic" style="width: 100%">
          <tpg-text-field
              label="Header input"
              clear-button
          ></tpg-text-field>
      </div>

      <div style="padding: 4px;">
          <tpg-text-field
              label="Content input"
              clear-button
          ></tpg-text-field>
      </div>

      <div style="padding: 4px; margin: 8px; border: 1px solid #8eaeb8; border-radius: 4px; display:flex; color: #8eaeb8">
        <img src="https://picsum.photos/200" alt="random image" />
        <div style="all: inherit; flex-grow: 1; justify-content: center; align-items: center;">
          <tpg-primary-button label="Button"></tpg-primary-button>
        </div>
      </div>

      <div slot="footer" style="padding: 4px;  color: pink">
          <tpg-truncate value="Footer label"></tpg-truncate>
          Pink label
      </div>

  </tpg-overlay-card>

  <script>
    const cards = document.querySelectorAll(
      'tpg-overlay-card.has-leading-color_lens-icon'
    );
    for (const elem of cards)  {
      const e = elem as OverlayCard;
      e.leadingIconTemplate = tpgIconColorLens;
    }

    const buttons = document.querySelectorAll(
      'tpg-quaternary-button.has-placeholder_custom-icon'
    );
    for (const elem of buttons)  {
      const button = elem as QuaternaryButton;
      button.iconTemplate = tpgIconPlaceholderCustom;
    }
  </script>

function SomeComponent() {
return (
  <>
    <tpg-overlay-card
      leadingIconTemplate={tpgIconColorLens}
      headingLabel="Heading"
      label="The label"
    >
      <tpg-quaternary-button
        slot="header-leading-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-leading-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-trailing-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-trailing-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>

      <div slot="header-generic" style={{ width: "100%" }}>
        <tpg-text-field label="Header input" clearButton></tpg-text-field>
      </div>

      <div style={{ padding: "4px" }}>
        <tpg-text-field label="Content input" clearButton></tpg-text-field>
      </div>

      <div
        style={{
          padding: "4px",
          margin: "8px",
          border: "1px solid #8eaeb8",
          borderRadius: "4px",
          display: "flex",
          color: "#8eaeb8",
        }}
      >
        <img src="https://picsum.photos/200" alt="random image" />
        <div
          style={{
            all: "inherit",
            flexGrow: "1",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <tpg-primary-button label="Button"></tpg-primary-button>
        </div>
      </div>

      <div slot="footer" style={{ padding: "4px", color: "pink" }}>
        <tpg-truncate label="Footer label"></tpg-truncate>
        Pink label
      </div>
    </tpg-overlay-card>
  </>
);
}

  <tpg-overlay-card
    class='has-leading-color_lens-icon'
    heading-label="Heading"
    label="The label"
  >

      <tpg-quaternary-button
          slot="header-leading-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-leading-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-trailing-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-trailing-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>

      <div slot="header-generic" style="width: 100%">
          <tpg-text-field
              label="Header input"
              clear-button
          ></tpg-text-field>
      </div>

      <div style="padding: 4px;">
          <tpg-text-field
              label="Content input"
              clear-button
          ></tpg-text-field>
      </div>

      <div style="padding: 4px; margin: 8px; border: 1px solid #8eaeb8; border-radius: 4px; display:flex; color: #8eaeb8">
        <img src="https://picsum.photos/200" alt="random image" />
        <div style="all: inherit; flex-grow: 1; justify-content: center; align-items: center;">
          <tpg-primary-button label="Button"></tpg-primary-button>
        </div>
      </div>

  </tpg-overlay-card>

  <script>
    const cards = document.querySelectorAll(
      'tpg-overlay-card.has-leading-color_lens-icon'
    );
    for (const elem of cards)  {
      const e = elem as OverlayCard;
      e.leadingIconTemplate = tpgIconColorLens;
    }

    const buttons = document.querySelectorAll(
      'tpg-quaternary-button.has-placeholder_custom-icon'
    );
    for (const elem of buttons)  {
      const button = elem as QuaternaryButton;
      button.iconTemplate = tpgIconPlaceholderCustom;
    }
  </script>

function SomeComponent() {
return (
  <>
    <tpg-overlay-card
      leadingIconTemplate={tpgIconColorLens}
      headingLabel="Heading"
      label="The label"
    >
      <tpg-quaternary-button
        slot="header-leading-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-leading-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-trailing-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-trailing-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>

      <div slot="header-generic" style={{ width: "100%" }}>
        <tpg-text-field label="Header input" clearButton></tpg-text-field>
      </div>

      <div style={{ padding: "4px" }}>
        <tpg-text-field label="Content input" clearButton></tpg-text-field>
      </div>

      <div
        style={{
          padding: "4px",
          margin: "8px",
          border: "1px solid #8eaeb8",
          borderRadius: "4px",
          display: "flex",
          color: "#8eaeb8",
        }}
      >
        <img src="https://picsum.photos/200" alt="random image" />
        <div
          style={{
            all: "inherit",
            flexGrow: "1",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <tpg-primary-button label="Button"></tpg-primary-button>
        </div>
      </div>
    </tpg-overlay-card>
  </>
);
}

Border types

  <tpg-overlay-card
    class='has-leading-color_lens-icon'
    heading-label="Heading"
    label="The label"
    border-type="ok"
  >

      <tpg-quaternary-button
          slot="header-leading-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-leading-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-trailing-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>
      <tpg-quaternary-button
          slot="header-trailing-buttons"
          class='has-placeholder_custom-icon'
      ></tpg-quaternary-button>

      <div slot="header-generic" style="width: 100%">
          <tpg-text-field
              label="Header input"
              clear-button
          ></tpg-text-field>
      </div>

      <div style="padding: 4px;">
          <tpg-text-field
              label="Content input"
              clear-button
          ></tpg-text-field>
      </div>

      <div style="padding: 4px; margin: 8px; border: 1px solid #8eaeb8; border-radius: 4px; display:flex; color: #8eaeb8">
        <img src="https://picsum.photos/200" alt="random image" />
        <div style="all: inherit; flex-grow: 1; justify-content: center; align-items: center;">
          <tpg-primary-button label="Button"></tpg-primary-button>
        </div>
      </div>

  </tpg-overlay-card>

  <script>
    const cards = document.querySelectorAll(
      'tpg-overlay-card.has-leading-color_lens-icon'
    );
    for (const elem of cards)  {
      const e = elem as OverlayCard;
      e.leadingIconTemplate = tpgIconColorLens;
    }

    const buttons = document.querySelectorAll(
      'tpg-quaternary-button.has-placeholder_custom-icon'
    );
    for (const elem of buttons)  {
      const button = elem as QuaternaryButton;
      button.iconTemplate = tpgIconPlaceholderCustom;
    }
  </script>

function SomeComponent() {
return (
  <>
    <tpg-overlay-card
      leadingIconTemplate={tpgIconColorLens}
      headingLabel="Heading"
      label="The label"
      border-type="ok"
    >
      <tpg-quaternary-button
        slot="header-leading-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-leading-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-trailing-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>
      <tpg-quaternary-button
        slot="header-trailing-buttons"
        iconTemplate={tpgIconPlaceholderCustom}
      ></tpg-quaternary-button>

      <div slot="header-generic" style={{ width: "100%" }}>
        <tpg-text-field label="Header input" clearButton></tpg-text-field>
      </div>

      <div style={{ padding: "4px" }}>
        <tpg-text-field label="Content input" clearButton></tpg-text-field>
      </div>

      <div
        style={{
          padding: "4px",
          margin: "8px",
          border: "1px solid #8eaeb8",
          borderRadius: "4px",
          display: "flex",
          color: "#8eaeb8",
        }}
      >
        <img src="https://picsum.photos/200" alt="random image" />
        <div
          style={{
            all: "inherit",
            flexGrow: "1",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <tpg-primary-button label="Button"></tpg-primary-button>
        </div>
      </div>
    </tpg-overlay-card>
  </>
);
}

Tables

Properties

Attribute	Property	Description	Type	Default Value
fill-trailing-header	fillTrailingHeader	Makes the trailing header content take up available space. This means that the generic header slot will stretch to meet the text labels on the left side.	boolean	false
leading-icon-template	leadingIconTemplate	Icon to be displayed to the left in the card header. Takes a URI-encoded SVG.	IconConstant \| ''	''
heading-label	headingLabel	Header heading text. This is a text label in the header that is of heavier font than the text property. It is optional.	string	''
label	label	Text label in header. Mandatory property. If not, it will have the placeholder 'Text'.	string	'Text'
border-type	borderType	Type of border color to display. If it is supplied, unless as the default empty string, it overwrites the default highlight behavior of the component and displays this color constantly as if the card is active, regardless of activity.	'ok' \| 'accent' \| 'error' \| 'warning' \| 'danger' \| ''	''

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
	The default slot of the component. Takes generic content, and comprises the body of the card.
header-leading-buttons	Can contain up to 5 quaternary buttons. These will be placed at left edge of header, with dividers injected between. The element type and count is not enforced, due to technical limitations, but if you need other content use generic header slot for this instead.
header-generic	Slot for content placed leftmost in the trailing header part, to the right of the labels, designed to receive generic elements.
header-trailing-buttons	Can contain up to 5 quaternary buttons. These will be placed at left edge of header, with dividers injected between. The element type and count is not enforced, due to technical limitations, but if you need other content use generic header slot for this instead.
footer	Can contain generic elements, placed at the bottom of the card, with a separator between it and the default slot.

CSS Parts

Attribute	Description
content	css part for adding styling to the default slot for content
header-generic	css part for adding styling to the header-generic slot
footer	css part for adding styling to the footer slot