Components

• Header
• Card
  • Card
  • Card Title
  • Card Content
• ColumnLayout

Get Started

To use these components, import from the package

import {Header} from 'react-components-9dots'

or import multiple components at once

import {Card, CardTitle, CardContent} from 'react-components-9dots'

Then use the the components like HTML elements.

<div>
  <Header />
  <Card />
</div>

Header

Properties

• title (string)

  Sets the title that appears on the website

<Header title = 'Header example' />

• style (object)

  Overwrites the default styles of the Header element

<Header style = {styles.header} />

Card

Card

Creates the outer card container. All of the information for the card should be inside of the Card element.

<Card>
  Content
</Card>

Properties

• style (object)

  Overwrites the default styles of the component

<Card style = {styles.card}>
  Content
</Card>

CardTitle

Properties

• content (string)

  The text that should be displayed in the title of the card

<Card>
  <CardTitle content = 'Example Title' />
</Card>

• style (object)

  Overwrites the default styles of the component

<Card>
  <CardTitle style = {styles.cardTitle} />
</Card>

CardContent

ColumnLayout

<ColumnLayout />

Properties

• cards (array)

  An array of cards that should be displayed in the column layout

<ColumnLayout cards = {this.cards} />

• width (number) A number that sets how wide each column is

<ColumnLayout cards = {this.cards} width = {350} />