Card

Purpose

A card is a way to visually group a collection of components on a page.

A card will wrap it's children in a relatively postioned white(N050) div with a box-shadow.

Focusing in or hovering over the contents of the card will cause the box-shadow to darken to draw the user's attention into the card.

Usage

import styled from 'styled-components';

import { IconButton } from '@wedgekit/button';
import Card from '@wedgekit/card';
import { Text } from '@wedgekit/core';

const InstallerWrapper = styled.div`
  display: flexbox;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin: 8px 32px;
`;

const Example = () => {
  const addInstaller = (e) => {
    console.log(e.target.getAttribute('aria-label'));
  };

  return (
    <Card>
      <InstallerWrapper>
        <Text>Installer Name</Text>
        <Text> 01/01/21 </Text>
        <Text> 01/02/21 </Text>
        <IconButton label="Add" icon="plus" domain="primary" onClick={addInstaller} />
      </InstallerWrapper>
    </Card>
  );
};

render(<Example />);

Props

children

Type: JSX.Element

Required: ✅

Children is the content of the Card.

className

Type: string

required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

ref

Type: RefObject<HTMLDivElement>

Required: ❌

An external ref can be passed in to provide acces to the underlying DOM elements.