blok

DISCLAIMER

This is currently in the early stages of development

This guide will eventually be moved to its own website

Getting Started

---

npm install --save blok

Usage

---

Import

---

import { Component, Component2 } from 'blok'

Contents

---

• Blok

  • Content
  • Header

• Grid

  • Row
  • Column

• Heading

• Line

• Link

• Text

Blok

---

Content

Name	Default	Type	Options	Use
color		string	black, white, red, green, blue	<Blok.Content color='blue' />
description		array	Custom array	<Blok.Content description={[{text: 'para one'}]} />
divide		boolean	true, false	<Blok.Content divide />
heading		string	Custom String	<Blok.Content heading='Hello' />
kicker		string	Custom string	<Blok.Content kicker='World' />
padded		boolean	true, false	<Blok.Content padded />

<Blok.Content
  heading='Section One'
  kicker='The Begining'
  divide
  padded
  description={[
    {text: 'This is section one and this is a paragraph.'}
  ]}
/>

Header

Name	Default	Type	Options	Use
color	'white'	string	black, white, red, green, blue	<Blok.Header color='blue' />
heading	'Title'	string	Custom String	<Blok.Header heading='Hello' />
link		array	Custom array	<Blok.Header link={[{text: 'link1', linkRef: '#', active: true}]} />
raised		string	Custom string	<Blok.Header raised />
transparent		boolean	true, false	<Blok.Header transparent />

<Blok.Header
  heading='Title'
  link={[
    {text: 'link1'},
    {text: 'link2'}
  ]}
  raised 
/>

Grid

---

Grid

Name	Default	Type	Options	Use
className		string	Custom classes	<Grid className='custom-class' />
color		string	black, white, red, green, blue	<Grid color='blue' />
font		string	heading, body, fancy	<Grid font='heading' />
raised		boolean	true, false	<Grid raised />
size		string	text, quote, h4, h3, h2, h1	<Grid size='large' />
textAlign		string	left, middle, right, justified	<Grid textAlign='middle' />

Row

Name	Default	Type	Options	Use
className		string	Custom classes	<Grid.Row className='custom-class' />
color		string	black, white, red, green, blue	<Grid.Row color='blue' />
font		string	heading, body, fancy	<Grid.Row font='heading' />
size		string	text, quote, h4, h3, h2, h1	<Grid.Row size='large' />
textAlign		string	left, middle, right, justified	<Grid.Row textAlign='middle' />

Column

Name	Default	Type	Options	Use
className		string	Custom classes	<Grid.Column className='custom-class' />
color		string	black, white, red, green, blue	<Grid.Column color='blue' />
font		string	heading, body, fancy	<Grid.Column font='heading' />
size		string	text, quote, h4, h3, h2, h1	<Grid.Column size='large' />
textAlign		string	left, middle, right, justified	<Grid.Column textAlign='middle' />
width		number	1, 2, 3, 4, 5, 6, 7, 8	<Grid.Column width={2} />

<Grid raised color='blue'>
  <Grid.Row className='my-row'>
    <Grid.Column width={2} textAlign='middle'>Hello</Grid.Column>
    <Grid.Column width={6} textAlign='right'>World</Grid.Column>
  <Grid.Row>
</Grid>

Heading

---

Heading

Name	Default	Type	Options	Use
className		string	Custom classes	<Heading className='custom-class' />
font		string	heading, body, fancy	<Heading font='heading' />
size		string	text, quote, h4, h3, h2, h1	<Heading size='large' />
tag	h1	string	p, h1, h2, h3, h4, h5, h6	<Heading tag='h3' />
text		string	Custom string	<Heading text='Hello World' />
textAlign		string	Custom string	<Heading text='Hello World' />

<Heading font='body' text='Hello World' />

Line

---

Line

Name	Default	Type	Options	Use
small		boolean	true, false	<Line small />

<Line small />

Link

---

Link

Name	Default	Type	Options	Use
active		boolean	true, false	<Link active />
className		string	Custom classes	<Link className='custom-class' />
color		string	black, white, red, green, blue	<Link color='blue' />
font		string	heading, body, fancy	<Link font='heading' />
linkRef		string	Custom href	<Link linkRef='www.website.com' />
size		string	text, quote, h4, h3, h2, h1	<Link size='large' />
text		string	Custom string	<Link text='Link to Website' />

<Link linkRef='www.website.com' text='Website' active />

Text

---

Text

Name	Default	Type	Options	Use
className		string	Custom classes	<Text className='custom-class' />
text		string	Custom string	<Text text='Hello World' />

<Text text='This is my custom text' />