Blok NPM | npm.io

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'

Blok
- Content
- Header
Grid
- Row
- Column
Heading
Line
Link
Text

Blok

Content

Name	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	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	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	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	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' />

react javascript blok frankydoge

classnames react

@everything-registry/sub-chunk-1246 @zalastax/nolb-blok jayasawant

7 years ago

7 years ago

7 years ago

7 years ago

blok v0.3.0

blok

Getting Started

Usage

Import

Contents

Blok

Grid

Heading

Line

Link

Text