Skip to content

Commit a8de3d3

Browse files
mrholekmrholek
committed
feat: add blocks
1 parent 54c1df1 commit a8de3d3

23 files changed

+1104
-7
lines changed

‎packages/docs/content/blocks/footers.mdx

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 { default as Footer1 } from './footers/FreeFooter1.tsx'
9+
import { default as Footer1Src } from '!raw-loader!./footers/FreeFooter1.tsx'
10+
11+
<Block className="p-0" code={Footer1Src} title="5-column with company mission and socials">
12+
<Footer1 />
13+
</Block>
14+
15+
import { default as Footer2 } from './footers/FreeFooter2.tsx'
16+
import { default as Footer2Src } from '!raw-loader!./footers/FreeFooter2.tsx'
17+
18+
<Block className="p-0 overflow-hidden" code={Footer2Src} title="5-column with company mission and socials">
19+
<Footer2 />
20+
</Block>
21+
22+
import { default as Footer3 } from './footers/ProFooter1.tsx'
23+
import { default as Footer3Src } from '!raw-loader!./footers/ProFooter1.tsx'
24+
25+
<Block className="p-0" code={Footer3Src} pro title="5-column with company mission, newsletter, and socials">
26+
<Footer3 />
27+
</Block>
28+
29+
import { default as Footer4 } from './footers/ProFooter2.tsx'
30+
import { default as Footer4Src } from '!raw-loader!./footers/ProFooter2.tsx'
31+
32+
<Block className="p-0" code={Footer4Src} pro title="5-column with company mission, newsletter, and socials">
33+
<Footer4 />
34+
</Block>

‎packages/docs/content/blocks/footers/FreeFooter1.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react'
2+
import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
3+
import CIcon from '@coreui/icons-react'
4+
import { CCol, CRow } from '@coreui/react'
5+
6+
import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
7+
8+
export default function FreeFooter1() {
9+
return (
10+
<div className="p-5">
11+
<CRow className="py-3">
12+
<CCol className="mb-5 mb-lg-0" lg={3}>
13+
<img src={CoreUISignetImg} alt="" width="44" height="48" />
14+
<div className="small text-body-secondary mt-3">
15+
Building elegant UI components to improve the world.
16+
</div>
17+
</CCol>
18+
<CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
19+
<h3 className="fs-6 fw-semibold mb-3">Company</h3>
20+
<ul className="list-unstyled text-body-secondary">
21+
<li className="py-1">About us</li>
22+
<li className="py-1">Careers</li>
23+
<li className="py-1">Commerce</li>
24+
<li className="py-1">Contact</li>
25+
</ul>
26+
</CCol>
27+
<CCol xs={6} md={3} lg={2}>
28+
<h3 className="fs-6 fw-semibold mb-3">Product</h3>
29+
<ul className="list-unstyled text-body-secondary">
30+
<li className="py-1">Support</li>
31+
<li className="py-1">Download</li>
32+
<li className="py-1">Pricing</li>
33+
<li className="py-1">Documentation</li>
34+
</ul>
35+
</CCol>
36+
<CCol xs={6} md={3} lg={2}>
37+
<h3 className="fs-6 fw-semibold mb-3">Services</h3>
38+
<ul className="list-unstyled text-body-secondary">
39+
<li className="py-1">Consulting</li>
40+
<li className="py-1">Analytics</li>
41+
<li className="py-1">Development</li>
42+
<li className="py-1">Design</li>
43+
</ul>
44+
</CCol>
45+
<CCol xs={6} md={3} lg={2}>
46+
<h3 className="fs-6 fw-semibold mb-3">Legal</h3>
47+
<ul className="list-unstyled text-body-secondary">
48+
<li className="py-1">Cookies</li>
49+
<li className="py-1">Privacy</li>
50+
<li className="py-1">Terms</li>
51+
<li className="py-1">Licenses</li>
52+
</ul>
53+
</CCol>
54+
</CRow>
55+
<hr />
56+
<div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
57+
<div className="small me-auto">
58+
© {new Date().getFullYear()} Your Company, Inc. All rights reserved.
59+
</div>
60+
<div className="d-flex gap-3">
61+
<a href="#" className="link-secondary">
62+
<CIcon icon={cibFacebookF} size="lg" />
63+
</a>
64+
<a href="#" className="link-secondary">
65+
<CIcon icon={cibInstagram} size="lg" />
66+
</a>
67+
68+
<a href="#" className="link-secondary">
69+
<CIcon icon={cibGithub} size="lg" />
70+
</a>
71+
<a href="#" className="link-secondary">
72+
<CIcon icon={cibYoutube} size="lg" />
73+
</a>
74+
<a href="#" className="link-secondary">
75+
<CIcon icon={cibLinkedin} size="lg" />
76+
</a>
77+
</div>
78+
</div>
79+
</div>
80+
)
81+
}

‎packages/docs/content/blocks/footers/FreeFooter2.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react'
2+
import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
3+
import CIcon from '@coreui/icons-react'
4+
import { CCol, CRow } from '@coreui/react'
5+
6+
import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
7+
8+
export default function FreeFooter2() {
9+
return (
10+
<div>
11+
<CRow className="p-5">
12+
<CCol className="mb-5 mb-lg-0" lg={3}>
13+
<img src={CoreUISignetImg} alt="" width="44" height="48" />
14+
<div className="small text-body-secondary mt-3">
15+
Building elegant UI components to improve the world.
16+
</div>
17+
</CCol>
18+
<CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
19+
<h3 className="fs-6 fw-semibold mb-3">Company</h3>
20+
<ul className="list-unstyled text-body-secondary">
21+
<li className="py-1">About us</li>
22+
<li className="py-1">Careers</li>
23+
<li className="py-1">Commerce</li>
24+
<li className="py-1">Contact</li>
25+
</ul>
26+
</CCol>
27+
<CCol xs={6} md={3} lg={2}>
28+
<h3 className="fs-6 fw-semibold mb-3">Product</h3>
29+
<ul className="list-unstyled text-body-secondary">
30+
<li className="py-1">Support</li>
31+
<li className="py-1">Download</li>
32+
<li className="py-1">Pricing</li>
33+
<li className="py-1">Documentation</li>
34+
</ul>
35+
</CCol>
36+
<CCol xs={6} md={3} lg={2}>
37+
<h3 className="fs-6 fw-semibold mb-3">Services</h3>
38+
<ul className="list-unstyled text-body-secondary">
39+
<li className="py-1">Support</li>
40+
<li className="py-1">Download</li>
41+
<li className="py-1">Pricing</li>
42+
<li className="py-1">Documentation</li>
43+
</ul>
44+
</CCol>
45+
<CCol xs={6} md={3} lg={2}>
46+
<h3 className="fs-6 fw-semibold mb-3">Legal</h3>
47+
<ul className="list-unstyled text-body-secondary">
48+
<li className="py-1">Cookies</li>
49+
<li className="py-1">Privacy</li>
50+
<li className="py-1">Terms</li>
51+
<li className="py-1">Licenses</li>
52+
</ul>
53+
</CCol>
54+
</CRow>
55+
<div className="d-flex flex-wrap align-items-center gap-3 bg-body-tertiary text-body-secondary py-4 px-5">
56+
<div className="small me-auto">
57+
© {new Date().getFullYear()} Your Company, Inc. All rights reserved.
58+
</div>
59+
<div className="d-flex gap-3">
60+
<a href="#" className="link-secondary">
61+
<CIcon icon={cibFacebookF} size="lg" />
62+
</a>
63+
<a href="#" className="link-secondary">
64+
<CIcon icon={cibInstagram} size="lg" />
65+
</a>
66+
67+
<a href="#" className="link-secondary">
68+
<CIcon icon={cibGithub} size="lg" />
69+
</a>
70+
<a href="#" className="link-secondary">
71+
<CIcon icon={cibYoutube} size="lg" />
72+
</a>
73+
<a href="#" className="link-secondary">
74+
<CIcon icon={cibLinkedin} size="lg" />
75+
</a>
76+
</div>
77+
</div>
78+
</div>
79+
)
80+
}

‎packages/docs/content/blocks/footers/ProFooter1.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react'
2+
import { cibFacebookF, cibGithub, cibInstagram, cibLinkedin, cibYoutube } from '@coreui/icons'
3+
import CIcon from '@coreui/icons-react'
4+
import { CButton, CCol, CForm, CFormInput, CRow } from '@coreui/react'
5+
6+
import CoreUISignetImg from './../../assets/images/brand/coreui-signet.svg'
7+
8+
export default function ProFooter1() {
9+
return (
10+
<div className="p-5">
11+
<CRow className="py-3">
12+
<CCol className="mb-5 mb-lg-0" lg={3}>
13+
<img src={CoreUISignetImg} alt="" width="44" height="48" />
14+
<div className="small text-body-secondary mt-3">
15+
Building elegant UI components to improve the world.
16+
</div>
17+
</CCol>
18+
<CCol xs={6} md={3} lg={{ span: 2, offset: 1 }}>
19+
<h3 className="fs-6 fw-semibold mb-3">Company</h3>
20+
<ul className="list-unstyled text-body-secondary">
21+
<li className="py-1">About us</li>
22+
<li className="py-1">Careers</li>
23+
<li className="py-1">Commerce</li>
24+
<li className="py-1">Contact</li>
25+
</ul>
26+
</CCol>
27+
<CCol xs={6} md={3} lg={2}>
28+
<h3 className="fs-6 fw-semibold mb-3">Product</h3>
29+
<ul className="list-unstyled text-body-secondary">
30+
<li className="py-1">Support</li>
31+
<li className="py-1">Download</li>
32+
<li className="py-1">Pricing</li>
33+
<li className="py-1">Documentation</li>
34+
</ul>
35+
</CCol>
36+
<CCol xs={6} md={3} lg={2}>
37+
<h3 className="fs-6 fw-semibold mb-3">Services</h3>
38+
<ul className="list-unstyled text-body-secondary">
39+
<li className="py-1">Support</li>
40+
<li className="py-1">Download</li>
41+
<li className="py-1">Pricing</li>
42+
<li className="py-1">Documentation</li>
43+
</ul>
44+
</CCol>
45+
<CCol xs={6} md={3} lg={2}>
46+
<h3 className="fs-6 fw-semibold mb-3">Legal</h3>
47+
<ul className="list-unstyled text-body-secondary">
48+
<li className="py-1">Cookies</li>
49+
<li className="py-1">Privacy</li>
50+
<li className="py-1">Terms</li>
51+
<li className="py-1">Licenses</li>
52+
</ul>
53+
</CCol>
54+
</CRow>
55+
<hr />
56+
<div className="d-flex align-items-center py-3">
57+
<div className="me-auto">
58+
<h3 className="fs-6 fw-semibold">Join our newsletter</h3>
59+
<div className="small text-body-secondary">
60+
Get the most recent news, articles, and resources delivered to your inbox every week.
61+
</div>
62+
</div>
63+
<CForm className="row g-3">
64+
<CCol xs="auto">
65+
<CFormInput
66+
type="email"
67+
id="newsletter"
68+
placeholder="Enter your email"
69+
aria-describedby="exampleFormControlInputHelpInline"
70+
/>
71+
</CCol>
72+
<CCol xs="auto">
73+
<CButton color="primary" type="submit">
74+
Subscribe
75+
</CButton>
76+
</CCol>
77+
</CForm>
78+
</div>
79+
<hr />
80+
<div className="d-flex flex-wrap align-items-center gap-3 text-body-secondary py-3">
81+
<div className="small me-auto">
82+
© {new Date().getFullYear()} Your Company, Inc. All rights reserved.
83+
</div>
84+
<div className="d-flex gap-3">
85+
<a href="#" className="link-secondary">
86+
<CIcon icon={cibFacebookF} size="lg" />
87+
</a>
88+
<a href="#" className="link-secondary">
89+
<CIcon icon={cibInstagram} size="lg" />
90+
</a>
91+
92+
<a href="#" className="link-secondary">
93+
<CIcon icon={cibGithub} size="lg" />
94+
</a>
95+
<a href="#" className="link-secondary">
96+
<CIcon icon={cibYoutube} size="lg" />
97+
</a>
98+
<a href="#" className="link-secondary">
99+
<CIcon icon={cibLinkedin} size="lg" />
100+
</a>
101+
</div>
102+
</div>
103+
</div>
104+
)
105+
}

0 commit comments

Comments
 (0)