@highlight-ui/card

Installation

Using npm:

npm install @highlight-ui/card

Using yarn:

yarn add @highlight-ui/card

Using pnpm:

pnpm install @highlight-ui/card

In your (S)CSS file:

@import url('@highlight-ui/card');

Once the package is installed, you can import the library:

import { Card, CardContent, CardFooter } from '@highlight-ui/card';

Usage

import React, { useState } from 'react';
import { Card, CardContent, CardFooter } from '@highlight-ui/card';
import { Typography } from '@highlight-ui/typography';

export default function CardExample() {
  return (
    <Card>
      <CardContent>
        <Typography component="h4" token="heading-medium">
          Active employees
        </Typography>
        <Typography component="span" token="caption">
          Last viewed on 06.07.2023
        </Typography>
        <Typography token="body-base">
          All the active employees from the marketing department with …
        </Typography>
      </CardContent>
      <CardFooter>
        <Typography component="span" token="caption">
          Created by <strong>Personio</strong>
        </Typography>
      </CardFooter>
    </Card>
  );
}

Props 📜

Card

| Prop | Type | Required | Default | Description | | :-------------- | :-------- | :------- | :------ | :------------------------------------------------------------------- | | animate | boolean | No | false | Specifies whether the card will have animation or not. | | cardClassName | string | No | | Allows providing a custom class name, applied to the content element |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.