Skip to main content

Card

The Card component in our library is a versatile container designed to present content in a visually appealing and structured manner. Cards typically feature a combination of text, icon, and buttons.

Usage

Basic usage

import React from 'react';
import {Card} from 'rn-inkpad';

const MyComponent = () => {
return (
<Card
buttons={[
{text: 'Cancel', onPress: () => {}},
{text: 'Ok', onPress: () => {}},
]}
description={
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla urna arcu, vulputate ut pellentesque eget, fermentum ac tellus. Duis neque lorem, fermentum at suscipit ac, imperdiet vel sapien.'
}
icon={'book-sharp'}
title={'Card'}
theme={{
themeColor: '#DB504A',
}}
/>
);
};

Props

NameTypeRequiredDescription
buttonsButton[]YESButtons that appear at the bottom of the card.
descriptionstringYESDescription text.
iconstringYESCard icon.
titlestringYESTitle text.
themeThemeNOPersonalize your card.

Button props

NameTypeRequiredDescription
textstringYESButton text.
onPress() => voidNOFunction that is executed when the button is pressed.

Theme props

NameTypeDefaultDescription
backgroundColorstringBackground color.
iconSizenumber25Card icon size.
themeColorstringIcon and buttons color.
titleColorstringTitle color.
titleSizenumber16Title font size.
shadowbooleanfalseTurn shadow on or off.

Personalized theme usage

import React from 'react';

import {Card} from 'rn-inkpad';

const MyComponent = () => {
return (
<Card
buttons={[
{text: 'Cancel', onPress: () => {}},
{text: 'Ok', onPress: () => {}},
]}
description={
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla urna arcu, vulputate ut pellentesque eget, fermentum ac tellus. Duis neque lorem, fermentum at suscipit ac, imperdiet vel sapien.'
}
icon={'book-sharp'}
title={'Card'}
theme={{
backgroundColor: '#EEE',
iconSize: 30,
themeColor: '#DB504A',
titleColor: '#21295C',
titleSize: 18,
shadow: true,
}}
/>
);
};

Personalized theme example