Skip to content

Commit fe0cbe5

Browse files
mrholekmrholek
committed
docs: update content
1 parent 7dca478 commit fe0cbe5

31 files changed

+1195
-896
lines changed

‎packages/docs/content/components/card/examples/CardBodyExample.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import { CCard, CCardBody } from '@coreui/react'
3+
4+
export const CardBodyExample = () => {
5+
return (
6+
<CCard>
7+
<CCardBody>This is some text within a card body.</CCardBody>
8+
</CCard>
9+
)
10+
}

‎packages/docs/content/components/card/examples/CardExample.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import { CButton, CCard, CCardBody, CCardImage, CCardText, CCardTitle } from '@coreui/react'
3+
4+
import ReactImg from './../../../assets/images/react.jpg'
5+
6+
export const CardExample = () => {
7+
return (
8+
<CCard style={{ width: '18rem' }}>
9+
<CCardImage orientation="top" src={ReactImg} />
10+
<CCardBody>
11+
<CCardTitle>Card title</CCardTitle>
12+
<CCardText>
13+
Some quick example text to build on the card title and make up the bulk of the card's
14+
content.
15+
</CCardText>
16+
<CButton color="primary" href="#">
17+
Go somewhere
18+
</CButton>
19+
</CCardBody>
20+
</CCard>
21+
)
22+
}

‎packages/docs/content/components/card/examples/CardGrid2Example.tsx

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react'
2+
import {
3+
CCard,
4+
CCardBody,
5+
CCardFooter,
6+
CCardImage,
7+
CCardText,
8+
CCardTitle,
9+
CCol,
10+
CRow,
11+
} from '@coreui/react'
12+
13+
import ReactImg from './../../../assets/images/react.jpg'
14+
15+
export const CardGrid2Example = () => {
16+
return (
17+
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
18+
<CCol xs>
19+
<CCard>
20+
<CCardImage orientation="top" src={ReactImg} />
21+
<CCardBody>
22+
<CCardTitle>Card title</CCardTitle>
23+
<CCardText>
24+
This is a wider card with supporting text below as a natural lead-in to additional
25+
content. This content is a little bit longer.
26+
</CCardText>
27+
</CCardBody>
28+
<CCardFooter>
29+
<small className="text-body-secondary">Last updated 3 mins ago</small>
30+
</CCardFooter>
31+
</CCard>
32+
</CCol>
33+
<CCol xs>
34+
<CCard>
35+
<CCardImage orientation="top" src={ReactImg} />
36+
<CCardBody>
37+
<CCardTitle>Card title</CCardTitle>
38+
<CCardText>
39+
This is a wider card with supporting text below as a natural lead-in to additional
40+
content. This content is a little bit longer.
41+
</CCardText>
42+
</CCardBody>
43+
<CCardFooter>
44+
<small className="text-body-secondary">Last updated 3 mins ago</small>
45+
</CCardFooter>
46+
</CCard>
47+
</CCol>
48+
<CCol xs>
49+
<CCard>
50+
<CCardImage orientation="top" src={ReactImg} />
51+
<CCardBody>
52+
<CCardTitle>Card title</CCardTitle>
53+
<CCardText>
54+
This is a wider card with supporting text below as a natural lead-in to additional
55+
content. This content is a little bit longer.
56+
</CCardText>
57+
</CCardBody>
58+
<CCardFooter>
59+
<small className="text-body-secondary">Last updated 3 mins ago</small>
60+
</CCardFooter>
61+
</CCard>
62+
</CCol>
63+
<CCol xs>
64+
<CCard>
65+
<CCardImage orientation="top" src={ReactImg} />
66+
<CCardBody>
67+
<CCardTitle>Card title</CCardTitle>
68+
<CCardText>
69+
This is a wider card with supporting text below as a natural lead-in to additional
70+
content. This content is a little bit longer.
71+
</CCardText>
72+
</CCardBody>
73+
<CCardFooter>
74+
<small className="text-body-secondary">Last updated 3 mins ago</small>
75+
</CCardFooter>
76+
</CCard>
77+
</CCol>
78+
</CRow>
79+
)
80+
}

‎packages/docs/content/components/card/examples/CardGrid3Example.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react'
2+
import { CCard, CCardBody, CCardImage, CCardText, CCardTitle, CCol, CRow } from '@coreui/react'
3+
4+
import ReactImg from './../../../assets/images/react.jpg'
5+
6+
export const CardGrid3Example = () => {
7+
return (
8+
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
9+
<CCol xs>
10+
<CCard className="h-100">
11+
<CCardImage orientation="top" src={ReactImg} />
12+
<CCardBody>
13+
<CCardTitle>Card title</CCardTitle>
14+
<CCardText>
15+
This is a wider card with supporting text below as a natural lead-in to additional
16+
content. This content is a little bit longer.
17+
</CCardText>
18+
</CCardBody>
19+
</CCard>
20+
</CCol>
21+
<CCol xs>
22+
<CCard className="h-100">
23+
<CCardImage orientation="top" src={ReactImg} />
24+
<CCardBody>
25+
<CCardTitle>Card title</CCardTitle>
26+
<CCardText>
27+
This card has supporting text below as a natural lead-in to additional content.
28+
</CCardText>
29+
</CCardBody>
30+
</CCard>
31+
</CCol>
32+
<CCol xs>
33+
<CCard className="h-100">
34+
<CCardImage orientation="top" src={ReactImg} />
35+
<CCardBody>
36+
<CCardTitle>Card title</CCardTitle>
37+
<CCardText>
38+
This is a wider card with supporting text below as a natural lead-in to additional
39+
content. This card has even longer content than the first to show that equal height
40+
action.
41+
</CCardText>
42+
</CCardBody>
43+
</CCard>
44+
</CCol>
45+
<CCol xs>
46+
<CCard className="h-100">
47+
<CCardImage orientation="top" src={ReactImg} />
48+
<CCardBody>
49+
<CCardTitle>Card title</CCardTitle>
50+
<CCardText>
51+
This is a wider card with supporting text below as a natural lead-in to additional
52+
content. This content is a little bit longer.
53+
</CCardText>
54+
</CCardBody>
55+
</CCard>
56+
</CCol>
57+
</CRow>
58+
)
59+
}

‎packages/docs/content/components/card/examples/CardGrid4Example.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react'
2+
import {
3+
CCard,
4+
CCardBody,
5+
CCardFooter,
6+
CCardImage,
7+
CCardText,
8+
CCardTitle,
9+
CCol,
10+
CRow,
11+
} from '@coreui/react'
12+
13+
import ReactImg from './../../../assets/images/react.jpg'
14+
15+
export const CardGrid4Example = () => {
16+
return (
17+
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
18+
<CCol xs>
19+
<CCard className="h-100">
20+
<CCardImage orientation="top" src={ReactImg} />
21+
<CCardBody>
22+
<CCardTitle>Card title</CCardTitle>
23+
<CCardText>
24+
This is a wider card with supporting text below as a natural lead-in to additional
25+
content. This content is a little bit longer.
26+
</CCardText>
27+
</CCardBody>
28+
<CCardFooter>
29+
<small className="text-body-secondary">Last updated 3 mins ago</small>
30+
</CCardFooter>
31+
</CCard>
32+
</CCol>
33+
<CCol xs>
34+
<CCard className="h-100">
35+
<CCardImage orientation="top" src={ReactImg} />
36+
<CCardBody>
37+
<CCardTitle>Card title</CCardTitle>
38+
<CCardText>
39+
This card has supporting text below as a natural lead-in to additional content.
40+
</CCardText>
41+
</CCardBody>
42+
<CCardFooter>
43+
<small className="text-body-secondary">Last updated 3 mins ago</small>
44+
</CCardFooter>
45+
</CCard>
46+
</CCol>
47+
<CCol xs>
48+
<CCard className="h-100">
49+
<CCardImage orientation="top" src={ReactImg} />
50+
<CCardBody>
51+
<CCardTitle>Card title</CCardTitle>
52+
<CCardText>
53+
This is a wider card with supporting text below as a natural lead-in to additional
54+
content. This card has even longer content than the first to show that equal height
55+
action.
56+
</CCardText>
57+
</CCardBody>
58+
<CCardFooter>
59+
<small className="text-body-secondary">Last updated 3 mins ago</small>
60+
</CCardFooter>
61+
</CCard>
62+
</CCol>
63+
</CRow>
64+
)
65+
}

‎packages/docs/content/components/card/examples/CardGridExample.tsx

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react'
2+
import {
3+
CCard,
4+
CCardBody,
5+
CCardFooter,
6+
CCardImage,
7+
CCardText,
8+
CCardTitle,
9+
CCol,
10+
CRow,
11+
} from '@coreui/react'
12+
13+
import ReactImg from './../../../assets/images/react.jpg'
14+
15+
export const CardGridExample = () => {
16+
return (
17+
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
18+
<CCol xs>
19+
<CCard>
20+
<CCardImage orientation="top" src={ReactImg} />
21+
<CCardBody>
22+
<CCardTitle>Card title</CCardTitle>
23+
<CCardText>
24+
This is a wider card with supporting text below as a natural lead-in to additional
25+
content. This content is a little bit longer.
26+
</CCardText>
27+
</CCardBody>
28+
<CCardFooter>
29+
<small className="text-body-secondary">Last updated 3 mins ago</small>
30+
</CCardFooter>
31+
</CCard>
32+
</CCol>
33+
<CCol xs>
34+
<CCard>
35+
<CCardImage orientation="top" src={ReactImg} />
36+
<CCardBody>
37+
<CCardTitle>Card title</CCardTitle>
38+
<CCardText>
39+
This is a wider card with supporting text below as a natural lead-in to additional
40+
content. This content is a little bit longer.
41+
</CCardText>
42+
</CCardBody>
43+
<CCardFooter>
44+
<small className="text-body-secondary">Last updated 3 mins ago</small>
45+
</CCardFooter>
46+
</CCard>
47+
</CCol>
48+
<CCol xs>
49+
<CCard>
50+
<CCardImage orientation="top" src={ReactImg} />
51+
<CCardBody>
52+
<CCardTitle>Card title</CCardTitle>
53+
<CCardText>
54+
This is a wider card with supporting text below as a natural lead-in to additional
55+
content. This content is a little bit longer.
56+
</CCardText>
57+
</CCardBody>
58+
<CCardFooter>
59+
<small className="text-body-secondary">Last updated 3 mins ago</small>
60+
</CCardFooter>
61+
</CCard>
62+
</CCol>
63+
<CCol xs>
64+
<CCard>
65+
<CCardImage orientation="top" src={ReactImg} />
66+
<CCardBody>
67+
<CCardTitle>Card title</CCardTitle>
68+
<CCardText>
69+
This is a wider card with supporting text below as a natural lead-in to additional
70+
content. This content is a little bit longer.
71+
</CCardText>
72+
</CCardBody>
73+
<CCardFooter>
74+
<small className="text-body-secondary">Last updated 3 mins ago</small>
75+
</CCardFooter>
76+
</CCard>
77+
</CCol>
78+
</CRow>
79+
)
80+
}

‎packages/docs/content/components/card/examples/CardGroups2Example.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react'
2+
import {
3+
CCard,
4+
CCardBody,
5+
CCardFooter,
6+
CCardGroup,
7+
CCardImage,
8+
CCardText,
9+
CCardTitle,
10+
} from '@coreui/react'
11+
12+
import ReactImg from './../../../assets/images/react.jpg'
13+
14+
export const CardGroups2Example = () => {
15+
return (
16+
<CCardGroup>
17+
<CCard>
18+
<CCardImage orientation="top" src={ReactImg} />
19+
<CCardBody>
20+
<CCardTitle>Card title</CCardTitle>
21+
<CCardText>
22+
This is a wider card with supporting text below as a natural lead-in to additional
23+
content. This content is a little bit longer.
24+
</CCardText>
25+
</CCardBody>
26+
<CCardFooter>
27+
<small className="text-body-secondary">Last updated 3 mins ago</small>
28+
</CCardFooter>
29+
</CCard>
30+
<CCard>
31+
<CCardImage orientation="top" src={ReactImg} />
32+
<CCardBody>
33+
<CCardTitle>Card title</CCardTitle>
34+
<CCardText>
35+
This card has supporting text below as a natural lead-in to additional content.
36+
</CCardText>
37+
</CCardBody>
38+
<CCardFooter>
39+
<small className="text-body-secondary">Last updated 3 mins ago</small>
40+
</CCardFooter>
41+
</CCard>
42+
<CCard>
43+
<CCardImage orientation="top" src={ReactImg} />
44+
<CCardBody>
45+
<CCardTitle>Card title</CCardTitle>
46+
<CCardText>
47+
This is a wider card with supporting text below as a natural lead-in to additional
48+
content. This card has even longer content than the first to show that equal height
49+
action.
50+
</CCardText>
51+
</CCardBody>
52+
<CCardFooter>
53+
<small className="text-body-secondary">Last updated 3 mins ago</small>
54+
</CCardFooter>
55+
</CCard>
56+
</CCardGroup>
57+
)
58+
}

0 commit comments

Comments
 (0)