card
v1.10.0arrow_drop_downv1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
322
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
21 KB
Cards are used to apply a container around a
related grouping of information.
1 contributor
Like
Install card as a package?
Copied
npm i @bit/nexxtway.react-rainbow.card
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example 

modifieddraft
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout

modifieddraft

chevron_left
chevron_right
card default with illustration
import React from 'react';
import { Card } from 'react-rainbow-components';
<div className="rainbow-p-around_large">
<Card>
<img
src="images/illustrations/Illustration-rainbow-1.svg"
className="rainbow-p-around_xx-large rainbow-m_auto rainbow-align-content_center"
alt="landscape with rainbows, birds and colorful balloons"
/>
</Card>
</div>
card-with header and button
import React from 'react';
import { Card, Avatar, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-regular-svg-icons';
<div className="rainbow-m-around_large">
<Card
icon={<Avatar icon={<FontAwesomeIcon icon={faUser} />} />}
title="Contact details"
actions={<Button label="New" variant="outline-brand" />}
/>
</div>
card-with header and spinner
import React from 'react';
import { Card, ButtonGroup, ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faUsers, faEdit, faAngleDown } from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-m-around_large">
<Card
isLoading
icon={<FontAwesomeIcon icon={faUsers} size="lg" className="rainbow-color_brand" />}
title="Contacts"
actions={
<ButtonGroup>
<ButtonIcon variant="border" icon={<FontAwesomeIcon icon={faPlus} />} />
<ButtonIcon variant="border" icon={<FontAwesomeIcon icon={faEdit} />} disabled />
<ButtonIcon
variant="border"
icon={<FontAwesomeIcon icon={faAngleDown} />}
disabled
/>
</ButtonGroup>
}
/>
</div>
card with header and illustration
import React from 'react';
import { Card, ButtonIcon, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTasks, faShareAlt, faAngleDown } from '@fortawesome/free-solid-svg-icons';
import { faHeart } from '@fortawesome/free-regular-svg-icons';
const iconContainerStyles = {
width: '2.5rem',
height: '2.5rem',
};
<div className="rainbow-m-around_large">
<Card
icon={
<span
className="rainbow-background-color_success rainbow-border-radius_circle rainbow-align-content_center"
style={iconContainerStyles}
>
<FontAwesomeIcon icon={faTasks} size="lg" className="rainbow-color_white" />
</span>
}
title="Task"
actions={<Button variant="neutral" label="Add" />}
footer={
<div className="rainbow-align-content_space-between">
<div className="rainbow-flex">
<ButtonIcon
icon={<FontAwesomeIcon icon={faHeart} />}
className="rainbow-m-right_xx-small"
/>
<ButtonIcon icon={<FontAwesomeIcon icon={faShareAlt} />} />
</div>
<ButtonIcon icon={<FontAwesomeIcon icon={faAngleDown} />} />
</div>
}
>
<div className="rainbow-p-around_xx-large rainbow-align-content_center rainbow-flex_column">
<img
src="images/illustrations/Illustration-rainbow-2.svg"
alt="landscape with rainbows and colorful birds"
/>
<h1 className="rainbow-p-top_large rainbow-font-size-heading_small rainbow-color_dark-1">
No new tasks
</h1>
</div>
</Card>
</div>
Properties
Name | Type | Default value | Description |
---|---|---|---|
isLoading | bool | null | |
children | node | null | |
title | string | node | null | |
icon | node | null | |
actions | node | null | |
title | string | node | null | |
title | string | node | null | The title can include text or another component, and is displayed in the header of the component. |
icon | node | null | The icon to show if it is passed. It must be a svg icon or a font icon. It is displayed in the header of the component. |
actions | node | null | Actions are components such as button or buttonIcon. Actions are displayed in the header. |
footer | string | node | null | The footer can include text or another component. |
children | node[] | object | null | The content of the Card. |
isLoading | bool | false | If is set to true, then is showed a loading symbol. |
className | string | undefined | A CSS class for the outer element, in addition to the component’s base classes. |
style | object | undefined | An object with custom style applied to the outer element. |