UNPKG

@gravity-ui/uikit

Version:

Gravity UI base styling and components

github.com/gravity-ui/uikit

gravity-ui/uikit

71 lines (51 loc) • 4.07 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
# Card `Card` is a reusable React component that basically is a card-like container with customizable styles and features. It is used to display information or content in a visually appealing and well-organized manner. ```tsx import {Card} from '@gravity-ui/uikit'; ``` ## Appearance `Card` can be displayed with multiple style combinations: - `theme`: `normal`, `info`, `success`, `warning`, `danger`, or `utility`. - `type`: `selection`, `action`, or `container`. - `view`:`outlined` or `clear`, or `outlined`, `filled`, or `raised` (depending on the `type` parameter). ## Theme This parameter is used to specify the card's theme style. It determines the card's color scheme and appearance. By specifying different theme values, you can customize the `Card` visual appearance to match your purpose and the style you need. - `normal`: Normal/default theme of the card. - `info`: Theme for displaying neutral information. - `success`: Theme for displaying positive or affirmative content. - `warning`: Theme for displaying warnings. - `danger`: Theme for displaying the content related to critical issues or errors. - `utility`: Theme for displaying useful tips. ## Type This parameter is used to define the type of the `Card` component. It allows you to customize the appearance and behavior of the card. - `container`: Card that acts as a container for other elements. It provides a structured layout for content. - `action`: Card with an interactive element, such as a button, that triggers an action when clicked. - `selection`: Card that can be selected or clicked to perform a specific action. ## View This parameter is used to specify the `Card` view or layout style. It allows you to customize the appearance and arrangement of the card content. - `clear`: No style. - `outlined`: Applies a thin border to highlight the card content. - `filled`: Fills in the card content. - `raised`: Applies a shadow to slightly lift the container. ## Properties | Name | Description | Type | Default | | :-------- | :------------------------------------------------------------------------------------------------ | :---------: | :-----------: | | children | Card content | `ReactNode` | | | type | The `Card` type determines which properties are available. | `string` | `"container"` | | view | This property is only available for the `"container"` and `"selection"` `type`s. | `string` | `"outlined"` | | theme | Card's base color. This property is only available for the `"container"` `type`. | `string` | `"normal"` | | size | The `Card` size determines which properties are available. | `string` | `"m"` | | className | CSS class | `string` | | | onClick | Card click handler. This property is only available for the `"selection"` and `"action"` `type`s. | `Function` | | | selected | Selected card. This property is only available for the `"selection"` `type`. | `Boolean` | | | disabled | Disabled card. This property is only available for the `"selection"` and `"action"` `type`s. | `Boolean` | | | qa | `data-qa` HTML attribute, used for testing | `string` | | ## CSS API | Name | Description | | :-------------------------- | :--------------- | | `--g-card-background-color` | Background color | | `--g-card-border-width` | Border width | | `--g-card-border-color` | Border color | | `--g-card-border-radius` | Border radius | | `--g-card-box-shadow` | Shadow |