simplified example of how the factiva site could be built using the NewsKit Grid

factiva-newskit-grid.tsx

import * as React from 'react';
import { getColorCssFromTheme, getSpacingCssFromTheme, styled } from '../../utils/style';
import { Grid, Cell } from '..';
import { Stack } from '../../stack';
import { Block } from '../../block';

const DowNav = styled.div`
  ${getColorCssFromTheme('background-color', 'interfaceBrand020')}
  height: 72px;
  width:100%;
`;

const DowFooter = styled.div`
  ${getColorCssFromTheme('background-color', 'interface010')}
  height: 72px;
  width:100%;
  ${getSpacingCssFromTheme('margin-bottom', 'space070')}
`;

const DowFooterContainer = styled.div`
  ${getColorCssFromTheme('background-color', 'interfaceBrand010')}
  ${getSpacingCssFromTheme('padding', 'sizing070')}
  width: 100%;
`;

const DowHeaderContainer = styled.div`
  ${getColorCssFromTheme('background-color', 'interfaceBrand010')}
  ${getSpacingCssFromTheme('padding-top', 'space110')}
  ${getSpacingCssFromTheme('margin-bottom', 'space070')}
  width: 100%;
`;

const DowTitleBar = styled.div`  
  ${getColorCssFromTheme('background-color', 'interfaceBrand010')}
  ${getSpacingCssFromTheme('min-height', 'space070')}
`

const DowContentBlock = styled.div`  
  ${getColorCssFromTheme('background-color', 'interface030')}
  ${getSpacingCssFromTheme('min-height', 'space070')}
  height: 200px;
  width:100%;
`

const DowContentBlockRight = styled.div`
  ${getColorCssFromTheme('background-color', 'interface030')}
  ${getSpacingCssFromTheme('min-height', 'space070')}
  height: 200px;
  width:100%;
  height: 400px;
`;

export default {
  title: 'grid',
  children: [
    {
      storyName: 'grid DOW',
      storyFn: () => (
        <React.Fragment>
          <DowHeaderContainer>
            <Grid>
              <Cell xs={12}>
                <DowNav></DowNav>
              </Cell>
            </Grid>
          </DowHeaderContainer>
            <Grid>
              <Cell xs={12} md={8} >
                <DowTitleBar />
                <Block spaceStack="space050">
                  <Stack flow="vertical-stretch" spaceInline="space050">
                    <DowContentBlock />
                    <DowContentBlock />
                    <DowContentBlock />
                    <DowContentBlock />
                    <DowContentBlock />
                    <DowContentBlock />
                  </Stack>
                </Block>
              </Cell>
              <Cell xsHidden smHidden md={4}>
                <DowTitleBar />
                <Stack spaceInline="space050" flow="vertical-stretch">
                  <DowContentBlockRight />
                  <DowContentBlockRight />
                  <DowContentBlockRight />
                </Stack>
              </Cell>
            </Grid>
            <DowFooterContainer>
              <Grid>
                <Cell xs={12}>
                  <DowFooter/>
                </Cell>
              </Grid>
            </DowFooterContainer>
        </React.Fragment>
      ),
    },
  ],
};