bpk-component-grid

4.1.2 • 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

Readme

Keywords

none

Package Sidebar

Install

npm i bpk-component-grid

Weekly Downloads

300

Version

4.1.2

License

Apache-2.0

Unpacked Size

52.8 kB

Total Files

20

Last publish

Collaborators

  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt
  • mattface