Layout
Layout is used for managing UI layouts. They are used in item list, scrolling elements and global viewport layout.
Installation
yarn add @happyfresh/layout
Usage
import { css } from 'emotion';
import { HorizontalList } from '@happyfresh/layout';
const SampleCard = (props) => (
<div
className={css`
width: 120px;
height: 120px;
border-radius: 4px;
background: hotpink;
`}
{...props}
/>
);
export const StoreList = () => (
<HorizontalList>
{Array(16)
.fill('')
.map(() => (
<>
<SampleCard style={{ marginBottom: '8px' }} />
<SampleCard />
</>
))}
</HorizontalList>
);