bpk-component-grid

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