Components

Get Started

To use these components, import from the package

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

or import multiple components at once

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

Then use the the components like HTML elements.

`html


Header


Creates a toolbar with a search box inside of it. This should be used for creating the top navigation bar for your website.

html


$3
- title (string)

Sets the title that appears on the website`html


- style (object)

Overwrites the default styles of the Header element`html


Card


Creates a card for displaying information. A card should normally be created using three elements:


Card

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

 element.

html

  Content


$3
- style (object)

Overwrites the default styles of the component`html Content`


Creates a title bar inside of the card. The CardTitle has a default color of 'tomato'

html


$3
- content (string)

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

- style (object)

Overwrites the default styles of the component`html`


This element creates an area to store the information for the card.

html

  
  
     Information 

     More Information


ColumnLayout


Creates a grid layout for displaying information. This component needs to be supplied with an array of react components to be displayed.

`html`

- cards (array)

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

- width (number) A number that sets how wide each column is`html``