@UiReact

UiReact logo icon

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiCard


Package: @uireact/card

v3.7.19

Component to render content, it has built in styling and props to make it flexible. It also extends motion.div so you can pass through any prop for motion animations.

#

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/card

#

Usage

UiCard with @uireact/framer-animation

In this example we are using an animation object from package @uireact/framer-animation throught the prop motion. There are several built-in animations to choose from, you can visit the framer animations doc to learn more about all the animations.

  <UiCard motion={UiReactViewPulse}>
    <UiHeading>🥵 Card header</UiHeading>
    <UiText>This is some content</UiText>
  </UiCard>

UiCard with click handler and motion animation

In this example we are passing the prop whileHover and whileTap to perform a scaling animation when any of these events happens.

You can learn more about it in the framer motion docs

  <UiCard motion={{whileHover:{ scale: 1.2 }, whileTap:{ scale: 0.8 }}} clickHandler={(identifier) => console.log(`Card ${identifier} clicked`)} identifier="My-ID">
    <UiHeading>Click me!</UiHeading>
  </UiCard>

UiCard with only content

  <UiCard>
    <UiHeading>Card header</UiHeading>
    <UiText>This is the content</UiText>
    <UiText size="xsmall">This is the footer</UiText>
  </UiCard>

UiCard as a link

  <UiCard link="https://www.uireact.io" bordered>
    <UiText>Open UiReact docs</UiText>
  </UiCard>

UiCard with image content

  <UiCard padding={null}>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Colima_360.jpg"
      style={{ width: '100%', borderRadius: '10px 10px 0px 0px' }}
    />
    <UiSpacing padding={{ all: 'five' }}>
      <UiHeading>Card header</UiHeading>
      <UiText>This is the content</UiText>
      <UiText size="xsmall">This is the footer</UiText>
    </UiSpacing>
  </UiCard>

UiCard with weight

  <>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="10">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="50">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="100">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="150">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="200">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
  </>

UiCard with color category

  <>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="10" category="positive">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="50" category="negative">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
    <UiSpacing margin={{ block: 'three' }}>
      <UiCard weight="100" category="error">
        <UiHeading>Card header</UiHeading>
        <UiText>This is the content</UiText>
        <UiText size="xsmall">This is the footer</UiText>
      </UiCard>
    </UiSpacing>
  </>

UiCard outlined

  <UiSpacing margin={{ block: 'three' }}>
    <UiCard weight="10" category="positive" styling="outlined">
      <h3>Card header</h3>
      <p>This is the content</p>
      <UiText size="small">This is the footer, using UiText styling is different.</UiText>
    </UiCard>
  </UiSpacing>

The outlined card will stylized some content such as texts, although if you use any text component the styling will be overwritten and has to be manually set up on each text component.

#

Props