Nanoscale Parts Manufacturing
Have ideas to improve npm?Join in the discussion! »

bpk-component-grid

2.0.101 • Public • Published

bpk-component-grid

Backpack grid components.

Installation

npm install bpk-component-grid --save-dev

Usage

import React from 'react';
import { BpkGridContainer, BpkGridRow, BpkGridColumn } from 'bpk-component-grid';

export default () => (
  <BpkGridContainer>
    <BpkGridRow>
      <BpkGridColumn width={8} tabletWidth={12}>
        Search controls
      </BpkGridColumn>
      <BpkGridColumn width={4} tabletWidth={0}>
        MPU
      </BpkGridColumn>
    </BpkGridRow>
    <BpkGridRow>
      <BpkGridColumn width={12}>
        Provider logos
      </BpkGridColumn>
    </BpkGridRow>
    <BpkGridRow>
      <BpkGridColumn width={4} mobileWidth={12}>
        Content panel
      </BpkGridColumn>
      <BpkGridColumn width={4} mobileWidth={12}>
        Content panel
      </BpkGridColumn>
      <BpkGridColumn width={4} mobileWidth={12}>
        Content panel
      </BpkGridColumn>
    </BpkGridRow>
    <BpkGridRow>
      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
        Confidence statement
      </BpkGridColumn>
      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
        Confidence statement
      </BpkGridColumn>
      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
        Confidence statement
      </BpkGridColumn>
      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
        Confidence statement
      </BpkGridColumn>
    </BpkGridRow>
  </BpkGridContainer>
);

Props

BpkGridContainer

Property PropType Required Default Value
children node true -
debug bool false false
fullWidth bool false false

BpkGridRow

Property PropType Required Default Value
children node true -
padded bool false true

BpkGridColumn

Property PropType Required Default Value
children node true -
width number true -
mobileWidth number false null
tabletWidth number false null
offset number false null
mobileOffset number false null
tabletOffset number false null
padded bool false true
debug bool false false

Keywords

none

Install

npm i bpk-component-grid

DownloadsWeekly Downloads

1,480

Version

2.0.101

License

Apache-2.0

Unpacked Size

69.4 kB

Total Files

20

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar