Pick a component

Card

Cards are surfaces that display content and optionally actions on a single topic. They often serve as an entry point to more detailed information.

<Card>
  <h2 slot="start">Everything</h2>
  <h3 slot="end">on-chain</h3>

  <p>
    Advanced smart contracts process HTTP requests, control other chains, and
    scale infinitely
  </p>
</Card>

Properties

Property Description Type Default
role The semantic role that will be rendered in the DOM when using this component. button or checkbox undefined undefined
ariaLabel An accessible label for the card. string or undefined undefined
selected Display the surface as selected. Useful if used as a on/off call to action. boolean false
disabled Disable clickable events. boolean or undefined undefined
testId Add a data-tid attribute to the DOM, useful for test purpose. string card
theme Display a particular theme for surface of the card. highlighted or transparent or framed or undefined undefined
icon Render an icon / call to action next within the card on the right side. expand or check or undefined undefined
href If the card is intended to function as a link, you can use this property to specify the URL of the linked resource. string or undefined undefined
noPadding Remove the default padding inside the card. Useful to catch onhover event with CSS from the content. boolean false

Notes

If a property href is set, the component renders a hyperlink within the DOM. If no such property is set, it renders an article which can be made interactive by using the role option.

Slots

Slot name Description
Default slot The content of the card.
start A heading title or content displayed at the top left side of the card.
end A heading title or content displayed stacked or at the top right side of the card (on wider screen).

Events

Event Description Detail
click Propagated click event (if not disabled). Inherited
mouseenter Propagated mouse enter event . Inherited
mouseleave Propagated mouse leave event. Inherited

Styling

In addition to the style that is inherited by using the component, the library also exposes a SCSS mixins that can be used to style the content projected in the card.

@use "@dfinity/gix-components/styles/mixins/card";

List of the mixins:

Mixin Description
stacked-title A column commonly use to display two information in start and end slots.
list To display a list of information in ul without bullet style.
list-item Style the li within above list.
title A title that will be truncated on one line if overflow.
meta Add space between two information and ensure return to new lines. Commonly used to pressent a label and a value

Showcase

A basic

Card

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

A link

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

Selected

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

Disabled

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely
Stacked title Styling

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

List styling

  • First item
  • Second item
  • Third item
Meta Styling
Label Value
Label Value

A description - Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

No padding

Example with no padding.

Themes:

Highlighted

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

Transparent

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

Button

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

Icons:

Checkmark

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

Checkmark and selected

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely

Expand

Advanced smart contracts process HTTP requests, control other chains, and scale infinitely