Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita8de3d3

Browse files
committed
feat: add blocks
1 parent54c1df1 commita8de3d3

File tree

23 files changed

+1104
-7
lines changed

23 files changed

+1104
-7
lines changed
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title:CoreUI React.js Footers
3+
name:Footers
4+
description:Use these CoreUI footer examples, built with CoreUI and CoreUI UI React Components, to add valuable information at the bottom of each page. Include a sitemap to enhance site navigation, links to your social media profiles, or a newsletter sign-up form. These examples, crafted by the CoreUI team, showcase various styles and layouts to fit your needs.
5+
full_width:true
6+
---
7+
8+
import {defaultasFooter1 }from'./footers/FreeFooter1.tsx'
9+
import {defaultasFooter1Src }from'!raw-loader!./footers/FreeFooter1.tsx'
10+
11+
<BlockclassName="p-0"code={Footer1Src}title="5-column with company mission and socials">
12+
<Footer1 />
13+
</Block>
14+
15+
import {defaultasFooter2 }from'./footers/FreeFooter2.tsx'
16+
import {defaultasFooter2Src }from'!raw-loader!./footers/FreeFooter2.tsx'
17+
18+
<BlockclassName="p-0 overflow-hidden"code={Footer2Src}title="5-column with company mission and socials">
19+
<Footer2 />
20+
</Block>
21+
22+
import {defaultasFooter3 }from'./footers/ProFooter1.tsx'
23+
import {defaultasFooter3Src }from'!raw-loader!./footers/ProFooter1.tsx'
24+
25+
<BlockclassName="p-0"code={Footer3Src}protitle="5-column with company mission, newsletter, and socials">
26+
<Footer3 />
27+
</Block>
28+
29+
import {defaultasFooter4 }from'./footers/ProFooter2.tsx'
30+
import {defaultasFooter4Src }from'!raw-loader!./footers/ProFooter2.tsx'
31+
32+
<BlockclassName="p-0"code={Footer4Src}protitle="5-column with company mission, newsletter, and socials">
33+
<Footer4 />
34+
</Block>
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
importReactfrom'react'
2+
import{cibFacebookF,cibGithub,cibInstagram,cibLinkedin,cibYoutube}from'@coreui/icons'
3+
importCIconfrom'@coreui/icons-react'
4+
import{CCol,CRow}from'@coreui/react'
5+
6+
importCoreUISignetImgfrom'./../../assets/images/brand/coreui-signet.svg'
7+
8+
exportdefaultfunctionFreeFooter1(){
9+
return(
10+
<divclassName="p-5">
11+
<CRowclassName="py-3">
12+
<CColclassName="mb-5 mb-lg-0"lg={3}>
13+
<imgsrc={CoreUISignetImg}alt=""width="44"height="48"/>
14+
<divclassName="small text-body-secondary mt-3">
15+
Building elegant UI components to improve the world.
16+
</div>
17+
</CCol>
18+
<CColxs={6}md={3}lg={{span:2,offset:1}}>
19+
<h3className="fs-6 fw-semibold mb-3">Company</h3>
20+
<ulclassName="list-unstyled text-body-secondary">
21+
<liclassName="py-1">About us</li>
22+
<liclassName="py-1">Careers</li>
23+
<liclassName="py-1">Commerce</li>
24+
<liclassName="py-1">Contact</li>
25+
</ul>
26+
</CCol>
27+
<CColxs={6}md={3}lg={2}>
28+
<h3className="fs-6 fw-semibold mb-3">Product</h3>
29+
<ulclassName="list-unstyled text-body-secondary">
30+
<liclassName="py-1">Support</li>
31+
<liclassName="py-1">Download</li>
32+
<liclassName="py-1">Pricing</li>
33+
<liclassName="py-1">Documentation</li>
34+
</ul>
35+
</CCol>
36+
<CColxs={6}md={3}lg={2}>
37+
<h3className="fs-6 fw-semibold mb-3">Services</h3>
38+
<ulclassName="list-unstyled text-body-secondary">
39+
<liclassName="py-1">Consulting</li>
40+
<liclassName="py-1">Analytics</li>
41+
<liclassName="py-1">Development</li>
42+
<liclassName="py-1">Design</li>
43+
</ul>
44+
</CCol>
45+
<CColxs={6}md={3}lg={2}>
46+
<h3className="fs-6 fw-semibold mb-3">Legal</h3>
47+
<ulclassName="list-unstyled text-body-secondary">
48+
<liclassName="py-1">Cookies</li>
49+
<liclassName="py-1">Privacy</li>
50+
<liclassName="py-1">Terms</li>
51+
<liclassName="py-1">Licenses</li>
52+
</ul>
53+
</CCol>
54+
</CRow>
55+
<hr/>
56+
<divclassName="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
57+
<divclassName="small me-auto">
58+
©{newDate().getFullYear()} Your Company, Inc. All rights reserved.
59+
</div>
60+
<divclassName="d-flex gap-3">
61+
<ahref="#"className="link-secondary">
62+
<CIconicon={cibFacebookF}size="lg"/>
63+
</a>
64+
<ahref="#"className="link-secondary">
65+
<CIconicon={cibInstagram}size="lg"/>
66+
</a>
67+
68+
<ahref="#"className="link-secondary">
69+
<CIconicon={cibGithub}size="lg"/>
70+
</a>
71+
<ahref="#"className="link-secondary">
72+
<CIconicon={cibYoutube}size="lg"/>
73+
</a>
74+
<ahref="#"className="link-secondary">
75+
<CIconicon={cibLinkedin}size="lg"/>
76+
</a>
77+
</div>
78+
</div>
79+
</div>
80+
)
81+
}
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
importReactfrom'react'
2+
import{cibFacebookF,cibGithub,cibInstagram,cibLinkedin,cibYoutube}from'@coreui/icons'
3+
importCIconfrom'@coreui/icons-react'
4+
import{CCol,CRow}from'@coreui/react'
5+
6+
importCoreUISignetImgfrom'./../../assets/images/brand/coreui-signet.svg'
7+
8+
exportdefaultfunctionFreeFooter2(){
9+
return(
10+
<div>
11+
<CRowclassName="p-5">
12+
<CColclassName="mb-5 mb-lg-0"lg={3}>
13+
<imgsrc={CoreUISignetImg}alt=""width="44"height="48"/>
14+
<divclassName="small text-body-secondary mt-3">
15+
Building elegant UI components to improve the world.
16+
</div>
17+
</CCol>
18+
<CColxs={6}md={3}lg={{span:2,offset:1}}>
19+
<h3className="fs-6 fw-semibold mb-3">Company</h3>
20+
<ulclassName="list-unstyled text-body-secondary">
21+
<liclassName="py-1">About us</li>
22+
<liclassName="py-1">Careers</li>
23+
<liclassName="py-1">Commerce</li>
24+
<liclassName="py-1">Contact</li>
25+
</ul>
26+
</CCol>
27+
<CColxs={6}md={3}lg={2}>
28+
<h3className="fs-6 fw-semibold mb-3">Product</h3>
29+
<ulclassName="list-unstyled text-body-secondary">
30+
<liclassName="py-1">Support</li>
31+
<liclassName="py-1">Download</li>
32+
<liclassName="py-1">Pricing</li>
33+
<liclassName="py-1">Documentation</li>
34+
</ul>
35+
</CCol>
36+
<CColxs={6}md={3}lg={2}>
37+
<h3className="fs-6 fw-semibold mb-3">Services</h3>
38+
<ulclassName="list-unstyled text-body-secondary">
39+
<liclassName="py-1">Support</li>
40+
<liclassName="py-1">Download</li>
41+
<liclassName="py-1">Pricing</li>
42+
<liclassName="py-1">Documentation</li>
43+
</ul>
44+
</CCol>
45+
<CColxs={6}md={3}lg={2}>
46+
<h3className="fs-6 fw-semibold mb-3">Legal</h3>
47+
<ulclassName="list-unstyled text-body-secondary">
48+
<liclassName="py-1">Cookies</li>
49+
<liclassName="py-1">Privacy</li>
50+
<liclassName="py-1">Terms</li>
51+
<liclassName="py-1">Licenses</li>
52+
</ul>
53+
</CCol>
54+
</CRow>
55+
<divclassName="d-flex flex-wrap align-items-center gap-3 bg-body-tertiary text-body-secondary py-4 px-5">
56+
<divclassName="small me-auto">
57+
©{newDate().getFullYear()} Your Company, Inc. All rights reserved.
58+
</div>
59+
<divclassName="d-flex gap-3">
60+
<ahref="#"className="link-secondary">
61+
<CIconicon={cibFacebookF}size="lg"/>
62+
</a>
63+
<ahref="#"className="link-secondary">
64+
<CIconicon={cibInstagram}size="lg"/>
65+
</a>
66+
67+
<ahref="#"className="link-secondary">
68+
<CIconicon={cibGithub}size="lg"/>
69+
</a>
70+
<ahref="#"className="link-secondary">
71+
<CIconicon={cibYoutube}size="lg"/>
72+
</a>
73+
<ahref="#"className="link-secondary">
74+
<CIconicon={cibLinkedin}size="lg"/>
75+
</a>
76+
</div>
77+
</div>
78+
</div>
79+
)
80+
}
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
importReactfrom'react'
2+
import{cibFacebookF,cibGithub,cibInstagram,cibLinkedin,cibYoutube}from'@coreui/icons'
3+
importCIconfrom'@coreui/icons-react'
4+
import{CButton,CCol,CForm,CFormInput,CRow}from'@coreui/react'
5+
6+
importCoreUISignetImgfrom'./../../assets/images/brand/coreui-signet.svg'
7+
8+
exportdefaultfunctionProFooter1(){
9+
return(
10+
<divclassName="p-5">
11+
<CRowclassName="py-3">
12+
<CColclassName="mb-5 mb-lg-0"lg={3}>
13+
<imgsrc={CoreUISignetImg}alt=""width="44"height="48"/>
14+
<divclassName="small text-body-secondary mt-3">
15+
Building elegant UI components to improve the world.
16+
</div>
17+
</CCol>
18+
<CColxs={6}md={3}lg={{span:2,offset:1}}>
19+
<h3className="fs-6 fw-semibold mb-3">Company</h3>
20+
<ulclassName="list-unstyled text-body-secondary">
21+
<liclassName="py-1">About us</li>
22+
<liclassName="py-1">Careers</li>
23+
<liclassName="py-1">Commerce</li>
24+
<liclassName="py-1">Contact</li>
25+
</ul>
26+
</CCol>
27+
<CColxs={6}md={3}lg={2}>
28+
<h3className="fs-6 fw-semibold mb-3">Product</h3>
29+
<ulclassName="list-unstyled text-body-secondary">
30+
<liclassName="py-1">Support</li>
31+
<liclassName="py-1">Download</li>
32+
<liclassName="py-1">Pricing</li>
33+
<liclassName="py-1">Documentation</li>
34+
</ul>
35+
</CCol>
36+
<CColxs={6}md={3}lg={2}>
37+
<h3className="fs-6 fw-semibold mb-3">Services</h3>
38+
<ulclassName="list-unstyled text-body-secondary">
39+
<liclassName="py-1">Support</li>
40+
<liclassName="py-1">Download</li>
41+
<liclassName="py-1">Pricing</li>
42+
<liclassName="py-1">Documentation</li>
43+
</ul>
44+
</CCol>
45+
<CColxs={6}md={3}lg={2}>
46+
<h3className="fs-6 fw-semibold mb-3">Legal</h3>
47+
<ulclassName="list-unstyled text-body-secondary">
48+
<liclassName="py-1">Cookies</li>
49+
<liclassName="py-1">Privacy</li>
50+
<liclassName="py-1">Terms</li>
51+
<liclassName="py-1">Licenses</li>
52+
</ul>
53+
</CCol>
54+
</CRow>
55+
<hr/>
56+
<divclassName="d-flex align-items-center py-3">
57+
<divclassName="me-auto">
58+
<h3className="fs-6 fw-semibold">Join our newsletter</h3>
59+
<divclassName="small text-body-secondary">
60+
Get the most recent news, articles, and resources delivered to your inbox every week.
61+
</div>
62+
</div>
63+
<CFormclassName="row g-3">
64+
<CColxs="auto">
65+
<CFormInput
66+
type="email"
67+
id="newsletter"
68+
placeholder="Enter your email"
69+
aria-describedby="exampleFormControlInputHelpInline"
70+
/>
71+
</CCol>
72+
<CColxs="auto">
73+
<CButtoncolor="primary"type="submit">
74+
Subscribe
75+
</CButton>
76+
</CCol>
77+
</CForm>
78+
</div>
79+
<hr/>
80+
<divclassName="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
81+
<divclassName="small me-auto">
82+
©{newDate().getFullYear()} Your Company, Inc. All rights reserved.
83+
</div>
84+
<divclassName="d-flex gap-3">
85+
<ahref="#"className="link-secondary">
86+
<CIconicon={cibFacebookF}size="lg"/>
87+
</a>
88+
<ahref="#"className="link-secondary">
89+
<CIconicon={cibInstagram}size="lg"/>
90+
</a>
91+
92+
<ahref="#"className="link-secondary">
93+
<CIconicon={cibGithub}size="lg"/>
94+
</a>
95+
<ahref="#"className="link-secondary">
96+
<CIconicon={cibYoutube}size="lg"/>
97+
</a>
98+
<ahref="#"className="link-secondary">
99+
<CIconicon={cibLinkedin}size="lg"/>
100+
</a>
101+
</div>
102+
</div>
103+
</div>
104+
)
105+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp