bpk-component-grid

Backpack grid components.

Usage no npm install needed!

<script type="module">
  import bpkComponentGrid from 'https://cdn.skypack.dev/bpk-component-grid';
</script>

README

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