This package has been deprecated

Author message:

This project has been deprecated and is not longer supported

rex-card

ReX React UI Components Library

ReX React UI Component: rex-card

This project is part of ReX Design System and it can be used to create React UI Components.
For more information visit:

Github
https://github.com/rakuten-rex

NPM
https://www.npmjs.com/org/rakuten-rex

How it was built

1. Build tool: webpack 4
2. Codebase: Fork of Bootstrap project + ReX custom styles
3. Css engine: Sass
4. JavaScript component: React

How to install

npm install rex-card@1.5.1 --save

What you can do

Cards are used for smaller amount of content than panels. Unlike panels, cards can have only one idea at a time placed on them, meaning the contents of the card need to relate to one article, or one product, etc. They usually serve as an entry point to more detailed information and provide only summary. Because of that, cards are usually used in groups.

Live examples

For a complete guide of properties for React and HTML classes please visit the Storybook site:

https://rakuten-rex.github.io/rex-card/

JavaScript modules

React component (JavaScript + CSS Styles)

For plug and play components integration.

Example:

import 'rex-core'; // ReX Core dependency
import { Card } from 'rex-card';

function MyComponent() {
  return (
    <Card
      card
      hasLink
      imageUrl='http://yourdomain.com/image.jpg'
      altText='Alt Text'
      title='Rakuten Travel'
      text='According to travelers, the Kyoto Sagano Bamboo forest is one of worlds most beautiful groves.'
    />
  );
}

CSS Styles only

For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.

Example:

import 'rex-core/css'; // ReX Core dependency
import 'rex-card/css';

function MyComponent() {
  return (
    <a href="index.html" class="card">
      <img class="card-img-top" alt="the Kyoto Sagano Bamboo forest" src="http://yourdomain.com/image.jpg" />
      <div class="card-body">
        <h5 class="card-title">Rakuten Travel</h5>
        <p class="card-text">According to travelers, the Kyoto Sagano Bamboo forest is one of worlds most beautiful groves.</p>
      </div>
    </a>
  );
}

Static HTML

Add it from our CDN into your HTML template or HTML static page.

For development mode:

<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.development.css" rel="stylesheet">
<!-- rex-card -->
<link href="https://r.r10s.jp/com/rex/rex-card/1.5.1/rex-card.development.css" rel="stylesheet">

For production mode:

<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.production.min.css" rel="stylesheet">
<!-- rex-card -->
<link href="https://r.r10s.jp/com/rex/rex-card/1.5.1/rex-card.production.min.css" rel="stylesheet">

Example:

<div class="rex-css-style my-component">
  <a href="index.html" class="card">
    <img class="card-img-top" alt="the Kyoto Sagano Bamboo forest" src="http://yourdomain.com/image.jpg" />
    <div class="card-body">
      <h5 class="card-title">Rakuten Travel</h5>
      <p class="card-text">According to travelers, the Kyoto Sagano Bamboo forest is one of worlds most beautiful groves.</p>
    </div>
  </a>
</div>

Javascript and React related documents

Take a look to this nice documentation pages to be more familiar with React and modern Javascript:

Official site

https://reactjs.org/docs/getting-started.html

Google Web Fundamentals (the whole site is a must to read)

https://developers.google.com/web/fundamentals/

Webpack as magic bundler

https://webpack.js.org/

Composing Software series (how to understand Funcional Programming)

https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea

Common React patterns

https://reactpatterns.com

Understanding Storybook with nice images

https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07

Some guidelines for clean code

https://americanexpress.io/clean-code-dirty-code/