High level container elements that are meant to help structure page like content and also require routing. Typically, <Page> headers are provided a block.
Requires: Container, Block
Props: type, children
<Page>
{{
header:(
<Block
lines={[
'Auto Policy',
'CAAS100383547',
'Policy Period 12/31/2018 to 12/31/2019',
]}
/>
),
body:'Body Content',
footer:'Footer Content',
}}
</Page>{
page: {
padding:'0 56px 0px 56px',
header:{
block: {
padding:'40px 0 40px 0',
border:{
bottom:{
thickness:'1px',
},
width:'calc(100% + 56px + 56px)',
left:'-56px',
},
col_2: {},
},
},
body:{
margin:'24px 0 0 0',
},
footer:{
height:{
min:'56px',
},
},
}
}@mixin page {
// → → returns <page> → <wrapper> → <wrapper> context
@mixin page_header {
// → → returns <wrapper type='header'> context
@mixin page_header_block {
// → → returns <Block><wrapper > context
}
}
@mixin page_body {
// → → returns <wrapper type='body'> context
}
@mixin page_footer {
// → → returns <wrapper type='footer'> context
}
}