Skip to content

Commit 77ac2f2

Browse files
mrholekmrholek
committed
docs: update content
1 parent f606823 commit 77ac2f2

File tree

22 files changed

+351
-363
lines changed

22 files changed

+351
-363
lines changed

‎docs/4.0/components/avatar.mdx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@ route: /components/avatar
99

1010
import { CAvatar } from './../../../src/index.ts'
1111

12+
import Avatar1 from './../../../src/docs/assets/images/avatars/1.jpg'
13+
import Avatar2 from './../../../src/docs/assets/images/avatars/2.jpg'
14+
import Avatar3 from './../../../src/docs/assets/images/avatars/3.jpg'
15+
1216
## Image avatars
1317

1418
<Example>
15-
<CAvatar src="/images/avatars/1.jpg" />
16-
<CAvatar src="/images/avatars/2.jpg" />
17-
<CAvatar src="/images/avatars/3.jpg" />
19+
<CAvatar src={Avatar1} />
20+
<CAvatar src={Avatar2} />
21+
<CAvatar src={Avatar3} />
1822
</Example>
1923

2024
```jsx
@@ -113,7 +117,7 @@ Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"` or `size="sm"` for
113117
## Avatars with status
114118

115119
<Example>
116-
<CAvatar src="/images/avatars/1.jpg" status="success" />
120+
<CAvatar src={Avatar1} status="success" />
117121
<CAvatar color="secondary" status="danger">
118122
CUI
119123
</CAvatar>

‎docs/4.0/components/card.mdx

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ import {
2929
CRow,
3030
} from './../../../src/index.ts'
3131

32+
import ReactImg from './../../../src/docs/assets/images/react.jpg'
33+
import React400Img from './../../../src/docs/assets/images/react400.jpg'
34+
3235
## About
3336

3437
A react card component is a content container. It incorporates options for images, headers, and footers, a wide variety of content, contextual background colors, and excellent display options.
@@ -41,7 +44,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
4144

4245
<Example>
4346
<CCard style={{ width: '18rem' }}>
44-
<CCardImage orientation="top" src="/images/react.jpg" />
47+
<CCardImage orientation="top" src={ReactImg} />
4548
<CCardBody>
4649
<CCardTitle>Card title</CCardTitle>
4750
<CCardText>
@@ -127,7 +130,7 @@ Subtitles are managed by `<CCardSubtitle>` component. If the `<CCardTitle>` also
127130

128131
<Example>
129132
<CCard style={{ width: '18rem' }}>
130-
<CCardImage orientation="top" src="/images/react.jpg" />
133+
<CCardImage orientation="top" src={ReactImg} />
131134
<CCardBody>
132135
<CCardText>
133136
Some quick example text to build on the card title and make up the bulk of the card's
@@ -222,7 +225,7 @@ Combine and match many content types to build the card you need, or throw everyt
222225

223226
<Example>
224227
<CCard style={{ width: '18rem' }}>
225-
<CCardImage orientation="top" src="/images/react.jpg" />
228+
<CCardImage orientation="top" src={ReactImg} />
226229
<CCardBody>
227230
<CCardTitle>Card title</CCardTitle>
228231
<CCardText>
@@ -663,7 +666,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
663666

664667
<Example>
665668
<CCard className="mb-3">
666-
<CCardImage orientation="top" src="/images/react.jpg" />
669+
<CCardImage orientation="top" src={ReactImg} />
667670
<CCardBody>
668671
<CCardTitle>Card title</CCardTitle>
669672
<CCardText>
@@ -686,7 +689,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
686689
<small className="text-muted">Last updated 3 mins ago</small>
687690
</CCardText>
688691
</CCardBody>
689-
<CCardImage orientation="bottom" src="/images/react.jpg" />
692+
<CCardImage orientation="bottom" src={ReactImg} />
690693
</CCard>
691694
</Example>
692695

@@ -715,7 +718,7 @@ Adapt an image into a background and overlay your text. Depending on the image,
715718

716719
<Example>
717720
<CCard className="mb-3 bg-dark text-white">
718-
<CCardImage src="/images/react.jpg" />
721+
<CCardImage src={ReactImg} />
719722
<CCardImageOverlay>
720723
<CCardTitle>Card title</CCardTitle>
721724
<CCardText>
@@ -749,7 +752,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
749752
<CCard className="mb-3" style={{ maxWidth: '540px' }}>
750753
<CRow className="g-0">
751754
<CCol md={4}>
752-
<CCardImage src="/images/react400.jpg" />
755+
<CCardImage src={React400Img} />
753756
</CCol>
754757
<CCol md={8}>
755758
<CCardBody>
@@ -1012,7 +1015,7 @@ Use card groups to render cards as a single, attached element with equal width a
10121015
<Example>
10131016
<CCardGroup>
10141017
<CCard>
1015-
<CCardImage orientation="top" src="/images/react.jpg" />
1018+
<CCardImage orientation="top" src={ReactImg} />
10161019
<CCardBody>
10171020
<CCardTitle>Card title</CCardTitle>
10181021
<CCardText>
@@ -1025,7 +1028,7 @@ Use card groups to render cards as a single, attached element with equal width a
10251028
</CCardBody>
10261029
</CCard>
10271030
<CCard>
1028-
<CCardImage orientation="top" src="/images/react.jpg" />
1031+
<CCardImage orientation="top" src={ReactImg} />
10291032
<CCardBody>
10301033
<CCardTitle>Card title</CCardTitle>
10311034
<CCardText>
@@ -1037,7 +1040,7 @@ Use card groups to render cards as a single, attached element with equal width a
10371040
</CCardBody>
10381041
</CCard>
10391042
<CCard>
1040-
<CCardImage orientation="top" src="/images/react.jpg" />
1043+
<CCardImage orientation="top" src={ReactImg} />
10411044
<CCardBody>
10421045
<CCardTitle>Card title</CCardTitle>
10431046
<CCardText>
@@ -1101,7 +1104,7 @@ When using card groups with footers, their content will automatically line up.
11011104
<Example>
11021105
<CCardGroup>
11031106
<CCard>
1104-
<CCardImage orientation="top" src="/images/react.jpg" />
1107+
<CCardImage orientation="top" src={ReactImg} />
11051108
<CCardBody>
11061109
<CCardTitle>Card title</CCardTitle>
11071110
<CCardText>
@@ -1114,7 +1117,7 @@ When using card groups with footers, their content will automatically line up.
11141117
</CCardFooter>
11151118
</CCard>
11161119
<CCard>
1117-
<CCardImage orientation="top" src="/images/react.jpg" />
1120+
<CCardImage orientation="top" src={ReactImg} />
11181121
<CCardBody>
11191122
<CCardTitle>Card title</CCardTitle>
11201123
<CCardText>
@@ -1126,7 +1129,7 @@ When using card groups with footers, their content will automatically line up.
11261129
</CCardFooter>
11271130
</CCard>
11281131
<CCard>
1129-
<CCardImage orientation="top" src="/images/react.jpg" />
1132+
<CCardImage orientation="top" src={ReactImg} />
11301133
<CCardBody>
11311134
<CCardTitle>Card title</CCardTitle>
11321135
<CCardText>
@@ -1193,7 +1196,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
11931196
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
11941197
<CCol xs>
11951198
<CCard>
1196-
<CCardImage orientation="top" src="/images/react.jpg" />
1199+
<CCardImage orientation="top" src={ReactImg} />
11971200
<CCardBody>
11981201
<CCardTitle>Card title</CCardTitle>
11991202
<CCardText>
@@ -1208,7 +1211,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
12081211
</CCol>
12091212
<CCol xs>
12101213
<CCard>
1211-
<CCardImage orientation="top" src="/images/react.jpg" />
1214+
<CCardImage orientation="top" src={ReactImg} />
12121215
<CCardBody>
12131216
<CCardTitle>Card title</CCardTitle>
12141217
<CCardText>
@@ -1223,7 +1226,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
12231226
</CCol>
12241227
<CCol xs>
12251228
<CCard>
1226-
<CCardImage orientation="top" src="/images/react.jpg" />
1229+
<CCardImage orientation="top" src={ReactImg} />
12271230
<CCardBody>
12281231
<CCardTitle>Card title</CCardTitle>
12291232
<CCardText>
@@ -1238,7 +1241,7 @@ Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to
12381241
</CCol>
12391242
<CCol xs>
12401243
<CCard>
1241-
<CCardImage orientation="top" src="/images/react.jpg" />
1244+
<CCardImage orientation="top" src={ReactImg} />
12421245
<CCardBody>
12431246
<CCardTitle>Card title</CCardTitle>
12441247
<CCardText>
@@ -1325,7 +1328,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
13251328
<CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
13261329
<CCol xs>
13271330
<CCard>
1328-
<CCardImage orientation="top" src="/images/react.jpg" />
1331+
<CCardImage orientation="top" src={ReactImg} />
13291332
<CCardBody>
13301333
<CCardTitle>Card title</CCardTitle>
13311334
<CCardText>
@@ -1340,7 +1343,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
13401343
</CCol>
13411344
<CCol xs>
13421345
<CCard>
1343-
<CCardImage orientation="top" src="/images/react.jpg" />
1346+
<CCardImage orientation="top" src={ReactImg} />
13441347
<CCardBody>
13451348
<CCardTitle>Card title</CCardTitle>
13461349
<CCardText>
@@ -1355,7 +1358,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
13551358
</CCol>
13561359
<CCol xs>
13571360
<CCard>
1358-
<CCardImage orientation="top" src="/images/react.jpg" />
1361+
<CCardImage orientation="top" src={ReactImg} />
13591362
<CCardBody>
13601363
<CCardTitle>Card title</CCardTitle>
13611364
<CCardText>
@@ -1370,7 +1373,7 @@ Change it to `md={{ cols: 3}}` and you'll see the fourth card wrap.
13701373
</CCol>
13711374
<CCol xs>
13721375
<CCard>
1373-
<CCardImage orientation="top" src="/images/react.jpg" />
1376+
<CCardImage orientation="top" src={ReactImg} />
13741377
<CCardBody>
13751378
<CCardTitle>Card title</CCardTitle>
13761379
<CCardText>
@@ -1457,7 +1460,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
14571460
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
14581461
<CCol xs>
14591462
<CCard className="h-100">
1460-
<CCardImage orientation="top" src="/images/react.jpg" />
1463+
<CCardImage orientation="top" src={ReactImg} />
14611464
<CCardBody>
14621465
<CCardTitle>Card title</CCardTitle>
14631466
<CCardText>
@@ -1469,7 +1472,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
14691472
</CCol>
14701473
<CCol xs>
14711474
<CCard className="h-100">
1472-
<CCardImage orientation="top" src="/images/react.jpg" />
1475+
<CCardImage orientation="top" src={ReactImg} />
14731476
<CCardBody>
14741477
<CCardTitle>Card title</CCardTitle>
14751478
<CCardText>
@@ -1480,7 +1483,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
14801483
</CCol>
14811484
<CCol xs>
14821485
<CCard className="h-100">
1483-
<CCardImage orientation="top" src="/images/react.jpg" />
1486+
<CCardImage orientation="top" src={ReactImg} />
14841487
<CCardBody>
14851488
<CCardTitle>Card title</CCardTitle>
14861489
<CCardText>
@@ -1493,7 +1496,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
14931496
</CCol>
14941497
<CCol xs>
14951498
<CCard className="h-100">
1496-
<CCardImage orientation="top" src="/images/react.jpg" />
1499+
<CCardImage orientation="top" src={ReactImg} />
14971500
<CCardBody>
14981501
<CCardTitle>Card title</CCardTitle>
14991502
<CCardText>
@@ -1565,7 +1568,7 @@ Just like with card groups, card footers will automatically line up.
15651568
<CRow xs={{ cols: 1 }} md={{ cols: 3 }} className="g-4">
15661569
<CCol xs>
15671570
<CCard className="h-100">
1568-
<CCardImage orientation="top" src="/images/react.jpg" />
1571+
<CCardImage orientation="top" src={ReactImg} />
15691572
<CCardBody>
15701573
<CCardTitle>Card title</CCardTitle>
15711574
<CCardText>
@@ -1580,7 +1583,7 @@ Just like with card groups, card footers will automatically line up.
15801583
</CCol>
15811584
<CCol xs>
15821585
<CCard className="h-100">
1583-
<CCardImage orientation="top" src="/images/react.jpg" />
1586+
<CCardImage orientation="top" src={ReactImg} />
15841587
<CCardBody>
15851588
<CCardTitle>Card title</CCardTitle>
15861589
<CCardText>
@@ -1594,7 +1597,7 @@ Just like with card groups, card footers will automatically line up.
15941597
</CCol>
15951598
<CCol xs>
15961599
<CCard className="h-100">
1597-
<CCardImage orientation="top" src="/images/react.jpg" />
1600+
<CCardImage orientation="top" src={ReactImg} />
15981601
<CCardBody>
15991602
<CCardTitle>Card title</CCardTitle>
16001603
<CCardText>

0 commit comments

Comments
 (0)