@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
82 lines (81 loc) • 2.77 kB
Markdown
```js
<Grid debug>
<Sizer mobile={{width: 1}} desktop={{width: 3}}>
<div>
<P>Some Info</P>
</div>
</Sizer>
<Sizer mobile={{width: 2}} desktop={{width: 6}}>
<Guarantee>
<P>We think you’re going to love your first box! On the off-chance you don’t, just <Link>contact us</Link> and we’ll refund your $X service fee.</P>
</Guarantee>
</Sizer>
<Sizer mobile={{width: 1}} desktop={{width: 3}}>
<div>
<P>Some Info</P>
</div>
</Sizer>
</Grid>
<Grid>
<Sizer desktop={{width: 12}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{start: 2, width: 10}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{start: 3, width: 8}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{start: 4, width: 6}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{start: 5, width: 4}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{start: 1, width: 3}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{width: 3}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{width: 3}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{width: 3}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer desktop={{width: 4}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer mobile={{width: 2}} desktop={{width: 4}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
<Sizer mobile={{width: 2}} desktop={{width: 4}}>
<InformationalSection>
<InlineImage src={'https://dummyimage.com/100x100/CCC/333.png&text=small'}/>
</InformationalSection>
</Sizer>
</Grid>
```