@vtex/styleguide
Version:
> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
277 lines (248 loc) • 7.61 kB
Markdown
#### Page blocks are the building blocks of a page. After choosing a layout you can use the Page Blocks to design the page as you will. There are four main kinds of Page blocks, full, Half, Aside and annotated. They are off to be used to fulfill design needs and to display the page content with the due visual hierarchy.
### 👍 Dos
- Use to build a page layout
- Use to create information hierarchy
### 👎 Don'ts
- PageBlock title is not the box title, it’s the title of a whole section. Boxes titles should be inside them.
- Over complicate the header aside. It should be very concise such as a button or a dropdown.
Full
```js
<div className="bg-muted-5 pa8">
<PageBlock variation="full">
<div />
</PageBlock>
</div>
```
Half
```js
<div className="bg-muted-5 pa8">
<PageBlock variation="half">
<div />
<div />
</PageBlock>
</div>
```
Aside
```js
<div className="bg-muted-5 pa8">
<PageBlock variation="aside">
<div />
<div />
</PageBlock>
</div>
```
Annotated
```js
<div className="bg-muted-5 pa8">
<PageBlock variation="annotated" title="Section title" subtitle="Subtitle">
<div />
</PageBlock>
</div>
```
With Title and subtitle
```js
<div className="bg-muted-5 pa8">
<PageBlock
title="Section"
subtitle="Some explanation for your section."
variation="full">
<div />
<div />
</PageBlock>
</div>
```
With Title, subtitle and aside children
```js
const Dropdown = require('../Dropdown').default
;<div className="bg-muted-5 pa8">
<PageBlock
title="Section"
subtitle="Some explanation for your section."
variation="full"
titleAside={
<div className="mt4 flex justify-end">
<div className="w-60">
<Dropdown
options={[
{ value: 'chagall', label: 'Chagall' },
{ value: 'dali', label: 'Dali' },
]}
value="dali"
onChange={() => {}}
/>
</div>
</div>
}>
<div />
<div />
</PageBlock>
</div>
```
Full-blown example
```js
const Tab = require('../Tabs/Tab').default
const Tabs = require('../Tabs').default
const Dropdown = require('../Dropdown').default
const Input = require('../Input').default
const Button = require('../Button').default
const Table = require('../Table').default
;<div className="bg-muted-5 pa8">
<PageBlock variation="full">
<div>
<h4 className="t-heading-4 mt0"> Fill this form </h4>
<div className="mb5">
<Input label="Lorem ipsum" />
</div>
<div className="mb5">
<Input label="Lorem ipsum" />
</div>
<div className="mb5">
<Input label="Lorem ipsum" />
</div>
<Button variation="primary">button</Button>
</div>
</PageBlock>
<PageBlock variation="half">
<div>
<p className="t-body lh-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et
neque sit amet urna rhoncus ultrices. Praesent feugiat congue ligula, ut
eleifend ligula laoreet vel.
</p>
<Button variation="tertiary" collapseLeft>
button
</Button>
<Button variation="tertiary">button</Button>
</div>
<div>
<p className="t-body lh-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et
neque sit amet urna rhoncus ultrices. Praesent feugiat congue ligula, ut
eleifend ligula laoreet vel.
</p>
<Button variation="tertiary" collapseLeft>
button
</Button>
<Button variation="tertiary">button</Button>
</div>
</PageBlock>
<PageBlock
variation="full"
title="Section"
subtitle="Some explanation for your section. It can be used as a helper text to guide user troughout the interface. ">
<div>
<div>
<div className="mb5">
<h4 className="t-heading-4 mt0"> List of people </h4>
<Table
schema={{
properties: {
name: {
type: 'string',
title: 'Name',
width: 200,
},
email: {
type: 'string',
title: 'Email',
width: 350,
},
},
}}
toolbar={{
inputSearch: {
value: () => {},
placeholder: 'Search stuff...',
onChange: () => {},
onClear: () => {},
onSubmit: () => {},
},
newLine: {
label: 'New',
handleCallback: () => {},
},
}}
pagination={{
onNextClick: () => {},
onPrevClick: () => {},
currentItemFrom: 1,
currentItemTo: 7,
onRowsChange: () => {},
textShowRows: 'Show rows',
textOf: 'of',
totalItems: 7,
rowsOptions: [7],
}}
items={[
{
email: 'olen.stamm21@yahoo.com',
name: 'Patrick Rothfuss',
},
{
email: 'junius0@gmail.com',
name: 'Hurricane Skywalker IV',
},
{
email: 'judd_gulgowski22@yahoo.com',
name: 'Tom Braddy',
},
{
email: 'catharine.leuschke62@hotmail.com',
name: 'Momochi Zabuza',
},
{
email: 'candido_ryan@hotmail.com',
name: 'Freddie Mercury',
},
{
email: 'freda_ritchie26@yahoo.com',
name: 'Dr. Lempi Mosciski',
},
{
email: 'elissa28@gmail.com',
name: 'Nikita Feeney',
},
]}
/>
</div>
</div>
</div>
</PageBlock>
<PageBlock variation="aside">
<div>
<Tabs>
<Tab label="A tab" active onClick={() => {}} />
<Tab label="Another tab" onClick={() => {}} />
</Tabs>
<p className="t-body lh-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum
tellus in mauris aliquet, at vestibulum elit scelerisque. Fusce dapibus
consectetur scelerisque. Nam vitae orci id metus aliquam efficitur at
non tortor. Etiam nec tincidunt mi, sit amet ultrices ipsum. Sed mattis
eu dui at ultrices. Pellentesque sit amet neque in nibh malesuada
elementum. Integer condimentum, enim non vehicula ultricies, dui eros
lobortis nunc, id convallis orci est vel nunc. Aenean iaculis vehicula
turpis sed consequat.
</p>
<p className="t-body lh-copy">
Praesent consequat ligula at auctor lobortis. Ut facilisis, odio ut
consequat consectetur, enim nisi hendrerit lectus, nec consectetur magna
ante id arcu. Proin id dolor id enim viverra ornare et ac mauris.
Integer efficitur egestas magna vel iaculis. Sed faucibus congue nisi,
cursus porta erat malesuada in. Vestibulum id sollicitudin libero.
Vivamus eu aliquet ipsum. Proin in rutrum eros.
</p>
</div>
<div>
<h4 className="t-heading-5 mt0"> Summary </h4>
<ul className="t-body lh-copy">
<li> Lorem ipsum </li>
<li> Lorem ipsum </li>
<li> Lorem ipsum </li>
<li> Lorem ipsum </li>
<li> Lorem ipsum </li>
</ul>
</div>
</PageBlock>
</div>
```