@highlight-ui/card NPM | npm.io

4.2.4 • Published 3 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

3 months ago

@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.

@highlight-ui/utils-commons

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @zalastax/nolb-_hig personio-componants

3 months ago

5 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

8 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

7 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

7 months ago

8 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago