z-card

A block container component to organize your web app. It is useful as a widget that can display brief information and perform related actions.

Table of contents

• z-card
• Table of contents
• Install
  • Import as HTML/CSS component
  • Import as Stateless Functional Component (SFC)
• How to use
  • CSS component
  • Stateless Functional Component
• License

Install

The package is available to download through npm:

npm install z-card --save

Import as HTML/CSS component

The simple case

The package will be located inside the node_modules folder, you can import it into the HTML document as follows:

<link rel="stylesheet" href="node_modules/z-card/dist/style.css">

When bundling an web app

For bundlers that support CSS, like Webpack, you can use it like this:

require('z-card/dist/style.css');

Import as a Stateless Functional Component (SFC)

The package does not include the renderer, you can use any renderer that supports SFCs. You could use React, Preact, Inferno, etc.

Notice: This package contains CSS styling, you may need a bundler that's capable of requiring CSS files like Webpack with css-loader.

Once you have chosen the renderer you can include the package in your project as follows:

// Assuming the React renderer is being used
const React = require('react');
const render = require('react-dom').render;

// Passing the render function when importing
const ZCard = require('z-card')(React.createElement);

// Render it on page, using JSX here :)
render(<ZCard header={'Title'} content={'Card content'} footer={'Footer'} />, document.body);

How to use

CSS component

Just add the HTML structure and CSS classes to reproduce the UI component.

Class hierarchy

| Recommended HTML tags | Parent | Class | Description | Type | | ----------------------------------- | --------- | --------------------- | ------------------------------------------------------------------- | -------- | | div, section, main, article | root | .z-card | Root container | Block | | div, section | .z-card | .z-card__header | The header of the card, what's going to render before the content | Element | | div, section | .z-card | .z-card__content | The content of the card, where the main information should be | Element | | div, section | .z-card | .z-card__footer | The footer of the card, a good place to state the available actions | Element | | Any containing .z-card | root | .z-card--bordered | Adds a border to the card | Modifier | | Any containing .z-card | root | .z-card--animated | Animate elevation changes | Modifier | | Any containing .z-card | root | .z-card--flat | Removes the card shadow | Modifier | | Any containing .z-card | root | .z-card--elevated-* | * can be 1 to 5. Higher the number, bigger the shadow | Modifier |

Full working example:

<div class="z-card">
  <div class="z-card__header">Title</div>
  <div class="z-card__content">Content</div>
  <div class="z-card__footer">Footer</div>
</div>

Stateless Functional Component

Render the HTML by using the SFC and passing props.

Supported Props

| Prop name | Expected Type | Description | | ----------- | -------------------------------- | ------------------------------------------------------------------- | | header | An HTMLElement or a TextNode | The header of the card, what's going to render before the content | | content | An HTMLElement or a TextNode | The content of the card, where the main information should be | | footer | An HTMLElement or a TextNode | The footer of the card, a good place to state the available actions | | bordered | boolean | Set to true to add a border to the card | | animated | boolean | Set to true to turn on animations for elevation changes | | flat | boolean | Set to true to make the card flat, removing the shadows | | elevation | number, 1 to 5 | Set the elevation of the card, the spread of the shadow |

Full example (JSX):

<ZCard header={'Title'} content={'Content'} footer={'Footer'} />

LICENSE

MIT