Layout Guide
default(size/spacing) - width 1280
size="full" - width 100%
size="medium" - width 1140
size="small" - width 455
spacing="large"
spacing="zero"
1import LayoutHeader from "@/components/fo/common/layout-header";
2import { HeaderContents } from "@/components/fo/common/inner-components/header-contents";
3import { Container, ContentsWrap } from "@/components/fo/common/contents-wrap";
4import LayoutFooter from "@/components/fo/common/layout-footer";
5
6<LayoutHeader>
7 <HeaderContents title={ "Layout Guide" } type="main" />
8</LayoutHeader>
9<Container>
10 <ContentsWrap>
11 <div className="p-5 bg-gray3 text-center">default(size/spacing) - width 1280</div>
12 </ContentsWrap>
13 <ContentsWrap size="full">
14 <div className="p-5 bg-gray3 text-center">size="full" - width 100%</div>
15 </ContentsWrap>
16 <ContentsWrap size="medium">
17 <div className="p-5 bg-gray3 text-center">size="medium" - width 1140</div>
18 </ContentsWrap>
19 <ContentsWrap size="small">
20 <div className="p-5 bg-gray3 text-center">size="small" - width 455</div>
21 </ContentsWrap>
22 <ContentsWrap spacing="large">
23 <div className="p-5 bg-gray3 text-center">spacing="large"</div>
24 </ContentsWrap>
25 <ContentsWrap spacing="zero">
26 <div className="p-5 bg-gray3 text-center">spacing="zero"</div>
27 </ContentsWrap>
28</Container>
29<LayoutFooter />