When creating a new page, figuring out how to get started can be quite a daunting task. To make this process as streamlined as possible, we provide a suite of composable layout components that can be combined in different ways to create our most common designs.
As much as possible, we aim to reduce or eliminate the need to write custom styles for standard layouts. When needed, you can pass additional classes or inline styles as overrides, but this should ideally be the exception.
Page blocks serve as the canvas for most content in your application. They are designed to break the content up into one or more horizontal bands. When used for hero content at the top of a page, they'll usually also have background colours applied to them.
Any full-width content placed inside a page block will remain centred on desktop screens without exceeding our maximum content width, while taking up the full width of the screen on smaller devices.
import {
PageBlock
} from 'seek-style-guide/react';
<PageBlock>
Lorem ipsum
</PageBlock>SectionsPage blocks by themselves don't provide any inner padding. This may be desirable in some cases, but you'll usually want to provide some space above and below your content, as well as providing responsive gutters on either side.
import {
PageBlock,
Section
} from 'seek-style-guide/react';
<PageBlock>
<Section>
Lorem ipsum
</Section>
</PageBlock>Sections can also serve as containers for page header content via the ‘header’ flag. This adds extra vertical space, ensuring content is sufficiently prioritised from everything around it.
import {
PageBlock,
Section,
Text
} from 'seek-style-guide/react';
<PageBlock>
<Section header>
<Text hero>
Lorem ipsum
</Text>
</Section>
</PageBlock>If we take away the instructional background colours, you can see that we're starting to build up a very standard looking page. Not only that, we've achieved this without writing much code, and without writing a single line of CSS.
import {
PageBlock,
Section,
Text
} from 'seek-style-guide/react';
<PageBlock>
<Section header>
<Text headline>
Lorem ipsum
</Text>
</Section>
</PageBlock>CardsOnce we start to add a lot of content to the page, you'll find yourself wanting to break it up into visually distinct blocks of colour. Cards make this extremely simple by providing a white background with vertical space underneath.
import {
PageBlock,
Section,
Text,
Card
} from 'seek-style-guide/react';
<PageBlock>
<div>
<Section header>
<Text headline>
Lorem ipsum
</Text>
</Section>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
</div>
</PageBlock>If you'd like to remove the white background, but keep the same visual spacing, you can use the ‘transparent’ flag.
import {
PageBlock,
Section,
Text,
Card
} from 'seek-style-guide/react';
<PageBlock>
<div>
<Section header>
<Text headline>
Lorem ipsum
</Text>
</Section>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
<Card transparent>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
</div>
</PageBlock>Card GroupsWhen multiple cards are very closely related, they can be nested within a card group to ensure that this relationship is clearly communicated.
import {
PageBlock,
Section,
Text,
CardGroup,
Card
} from 'seek-style-guide/react';
<PageBlock>
<div>
<Section header>
<Text headline>
Lorem ipsum
</Text>
</Section>
<CardGroup>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
</CardGroup>
</div>
</PageBlock>Asided LayoutsEven though we set a maximum content width on larger screens, it results in line lengths that extend beyond comfortable reading levels. This is where our asided layout component comes in, giving us the ability to quickly and easily place content side-by-side on large screens, while responsively collapsing down to a single column on small screens.
import {
PageBlock,
AsidedLayout,
Section
} from 'seek-style-guide/react';
<PageBlock>
<AsidedLayout
renderAside={() => {...}}
size="33%"
>
<Section>
Lorem ipsum
</Section>
</AsidedLayout>
</PageBlock>By default, sidebar content is placed below the main content on smaller screens. If the sidebar content is providing valuable context that, when read linearly, needs to be placed before the main content, the ‘reverse’ flag will flip the content order.
import {
PageBlock,
AsidedLayout,
Section
} from 'seek-style-guide/react';
<PageBlock>
<AsidedLayout
renderAside={() => {...}}
reverse
size="33%"
>
<Section>
Lorem ipsum
</Section>
</AsidedLayout>
</PageBlock>Putting it all together with real content, it starts to look much more like a real page.
import {
PageBlock,
Section,
Text,
AsidedLayout,
Card
} from 'seek-style-guide/react';
<PageBlock>
<div>
<Section header>
<Text headline>
Lorem ipsum
</Text>
</Section>
<AsidedLayout
renderAside={() => {...}}
size="33%"
>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
<Card>
<Section>
<Text heading>
Lorem ipsum
</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</Section>
</Card>
</AsidedLayout>
</div>
</PageBlock>