Skip to content

Commit 36385c8

Browse files
TechQueryTechQuery
committed
[add] Card component
1 parent 0d1586b commit 36385c8

5 files changed

Lines changed: 320 additions & 14 deletions

File tree

‎document/source/components/Card.mdx‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
---
2+
layout: docs
3+
title: Card
4+
description: Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
5+
group: Components
6+
---
7+
8+
import { Card } from 'boot-cell/source/Content/Card';
9+
import { Button } from 'boot-cell/source/Form/Button';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
## About
14+
15+
A **card** is a flexible and extensible content container. It includes options for headers and footers,
16+
a wide variety of content, contextual background colors, and powerful display options.
17+
If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails.
18+
Similar functionality to those components is available as modifier classes for cards.
19+
20+
## Example
21+
22+
Cards are built with as little markup and styles as possible,
23+
but still manage to deliver a ton of control and customization.
24+
25+
Below is an example of a basic card with mixed content and a fixed width.
26+
Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.
27+
This is easily customized with our various [sizing options](#sizing).
28+
29+
<Example>
30+
<Card
31+
image="https://tech-query.me/medias/featureimages/6.jpg"
32+
title="Card title"
33+
text="Some quick example text to build on the card title and make up the bulk of the card's content."
34+
>
35+
<Button>Go somewhere</Button>
36+
</Card>
37+
</Example>
38+
39+
```JavaScript
40+
import { render } from 'web-cell';
41+
import { Card } from 'boot-cell/source/Content/Card';
42+
import { Button } from 'boot-cell/source/Form/Button';
43+
44+
render(
45+
<Card
46+
image="https://tech-query.me/medias/featureimages/6.jpg"
47+
title="Card title"
48+
text="Some quick example text to build on the card title and make up the bulk of the card's content."
49+
>
50+
<Button>Go somewhere</Button>
51+
</Card>
52+
);
53+
```
54+
55+
## Content types
56+
57+
Cards support a wide variety of content, including images, text, list groups, links, and more.
58+
Below are examples of what’s supported.
59+
60+
### Body
61+
62+
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
63+
64+
<Example>
65+
<Card text="This is some text within a card body." />
66+
</Example>
67+
68+
```JavaScript
69+
import { render } from 'web-cell';
70+
import { Card } from 'boot-cell/source/Content/Card';
71+
72+
render(
73+
<Card text="This is some text within a card body." />
74+
);
75+
```
76+
77+
### Titles, text, and links
78+
79+
Card titles are used by adding `.card-title` to a `<h* />` tag. In the same way,
80+
links are added and placed next to each other by adding `.card-link` to an `<a />` tag.
81+
82+
<Example>
83+
<Card
84+
title="Card title"
85+
subtitle="Card subtitle"
86+
text="Some quick example text to build on the card title and make up the bulk of the card's content."
87+
>
88+
<a className="card-link" href="javascript: void;">
89+
Card link
90+
</a>
91+
<a className="card-link" href="javascript: void;">
92+
Another link
93+
</a>
94+
</Card>
95+
</Example>
96+
97+
```JavaScript
98+
import { render } from 'web-cell';
99+
import { Card } from 'boot-cell/source/Content/Card';
100+
101+
render(
102+
<Card
103+
title="Card title"
104+
subtitle="Card subtitle"
105+
text="Some quick example text to build on the card title and make up the bulk of the card's content."
106+
>
107+
<a className="card-link" href="javascript: void;">
108+
Card link
109+
</a>
110+
<a className="card-link" href="javascript: void;">
111+
Another link
112+
</a>
113+
</Card>
114+
);
115+
```
116+
117+
### Images
118+
119+
`image` property places an image to the top of the card. With `text` property, text can be added to the card.
120+
121+
<Example>
122+
<Card
123+
image="https://tech-query.me/medias/featureimages/6.jpg"
124+
text="Some quick example text to build on the card title and make up the bulk of the card's content."
125+
/>
126+
</Example>
127+
128+
```JavaScript
129+
import { render } from 'web-cell';
130+
import { Card } from 'boot-cell/source/Content/Card';
131+
132+
render(
133+
<Card
134+
image="https://tech-query.me/medias/featureimages/6.jpg"
135+
text="Some quick example text to build on the card title and make up the bulk of the card's content."
136+
/>
137+
);
138+
```
139+
140+
### Header and footer
141+
142+
Add an optional header and/or footer within a card.
143+
144+
<Example>
145+
<Card
146+
header="Featured"
147+
title="Special title treatment"
148+
text="With supporting text below as a natural lead-in to additional content."
149+
>
150+
<Button>Go somewhere</Button>
151+
</Card>
152+
</Example>
153+
154+
```JavaScript
155+
import { render } from 'web-cell';
156+
import { Card } from 'boot-cell/source/Content/Card';
157+
import { Button } from 'boot-cell/source/Form/Button';
158+
159+
render(
160+
<Card
161+
header="Featured"
162+
title="Special title treatment"
163+
text="With supporting text below as a natural lead-in to additional content."
164+
>
165+
<Button>Go somewhere</Button>
166+
</Card>
167+
);
168+
```
169+
170+
<Example>
171+
<Card header="Quote">
172+
<blockquote className="blockquote mb-0">
173+
<p>
174+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
175+
posuere erat a ante.
176+
</p>
177+
<footer className="blockquote-footer">
178+
Someone famous in <cite title="Source Title">Source Title</cite>
179+
</footer>
180+
</blockquote>
181+
</Card>
182+
</Example>
183+
184+
```JavaScript
185+
import { render } from 'web-cell';
186+
import { Card } from 'boot-cell/source/Content/Card';
187+
188+
render(
189+
<Card header="Quote">
190+
<blockquote className="blockquote mb-0">
191+
<p>
192+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
193+
posuere erat a ante.
194+
</p>
195+
<footer className="blockquote-footer">
196+
Someone famous in <cite title="Source Title">Source Title</cite>
197+
</footer>
198+
</blockquote>
199+
</Card>
200+
);
201+
```
202+
203+
<Example>
204+
<Card
205+
className="text-center"
206+
header="Featured"
207+
title="Special title treatment"
208+
text="With supporting text below as a natural lead-in to additional content."
209+
footer="2 days ago"
210+
>
211+
<Button>Go somewhere</Button>
212+
</Card>
213+
</Example>
214+
215+
```JavaScript
216+
import { render } from 'web-cell';
217+
import { Card } from 'boot-cell/source/Content/Card';
218+
import { Button } from 'boot-cell/source/Form/Button';
219+
220+
render(
221+
<Card
222+
className="text-center"
223+
header="Featured"
224+
title="Special title treatment"
225+
text="With supporting text below as a natural lead-in to additional content."
226+
footer="2 days ago"
227+
>
228+
<Button>Go somewhere</Button>
229+
</Card>
230+
);
231+
```
232+
233+
## Images
234+
235+
### Image overlays
236+
237+
Turn an image into a card background and overlay your card’s text.
238+
Depending on the image, you may or may not need additional styles or utilities.
239+
240+
<Example>
241+
<Card
242+
className="bg-dark text-white"
243+
title="Card title"
244+
text="This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
245+
image="https://tech-query.me/medias/featureimages/6.jpg"
246+
overlay
247+
>
248+
<time>Last updated 3 mins ago</time>
249+
</Card>
250+
</Example>
251+
252+
```JavaScript
253+
import { render } from 'web-cell';
254+
import { Card } from 'boot-cell/source/Content/Card';
255+
256+
render(
257+
<Card
258+
className="bg-dark text-white"
259+
title="Card title"
260+
text="This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
261+
image="https://tech-query.me/medias/featureimages/6.jpg"
262+
overlay
263+
>
264+
<time>Last updated 3 mins ago</time>
265+
</Card>
266+
);
267+
```
268+
269+
> Note that content should not be larger than the height of the image.
270+
> If content is larger than the image the content will be displayed outside the image.
271+
272+
## Horizontal
273+
274+
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
275+
Further adjustments may be needed depending on your card content.
276+
277+
<Example>
278+
<Card
279+
title="Card title"
280+
text="This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
281+
image="https://tech-query.me/medias/featureimages/6.jpg"
282+
direction="horizontal"
283+
>
284+
<small className="text-muted">Last updated 3 mins ago</small>
285+
</Card>
286+
</Example>
287+
288+
```JavaScript
289+
import { render } from 'web-cell';
290+
import { Card } from 'boot-cell/source/Content/Card';
291+
292+
render(
293+
<Card
294+
title="Card title"
295+
text="This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."
296+
image="https://tech-query.me/medias/featureimages/6.jpg"
297+
direction="horizontal"
298+
>
299+
<small className="text-muted">Last updated 3 mins ago</small>
300+
</Card>
301+
);
302+
```

‎document/source/components/Icon.mdx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ render(
232232
Use `border` in combination with pulled icon styles for more visual separation.
233233

234234
<Example>
235-
<Icon name="quote-left" size={2} pull="left" />
235+
<Icon name="arrow-right" size={2} pull="right" border />
236236
Gatsby believed in the green light, the orgastic future that year by year recedes
237237
before us. It eluded us then, but that’s no matter — tomorrow we will run faster,
238238
stretch our arms further... And one fine morning — So we beat on, boats against
@@ -379,23 +379,23 @@ Then add the `stack={1}` property for the regularly sized icon and add the `stac
379379
You can even throw larger icon classes on the parent to get further control of sizing.
380380

381381
<Example>
382-
<span class="fa-stack fa-2x">
382+
<span className="fa-stack fa-2x">
383383
<Icon name="square" stack={2} />
384384
<Icon kind="brands" name="twitter" stack={1} inverse />
385385
</span>
386-
<span class="fa-stack fa-2x">
386+
<span className="fa-stack fa-2x">
387387
<Icon name="circle" stack={2} />
388388
<Icon name="flag" stack={1} inverse />
389389
</span>
390-
<span class="fa-stack fa-2x">
390+
<span className="fa-stack fa-2x">
391391
<Icon name="square" stack={2} />
392392
<Icon name="terminal" stack={1} inverse />
393393
</span>
394-
<span class="fa-stack fa-4x">
394+
<span className="fa-stack fa-4x">
395395
<Icon name="square" stack={2} />
396396
<Icon name="terminal" stack={1} inverse />
397397
</span>
398-
<span class="fa-stack fa-2x">
398+
<span className="fa-stack fa-2x">
399399
<Icon name="camera" stack={1} />
400400
<Icon name="ban" stack={2} className="text-danger" />
401401
</span>
@@ -407,23 +407,23 @@ import { Icon } from 'boot-cell/source/Reminder/Icon';
407407

408408
render(
409409
<Fragment>
410-
<span class="fa-stack fa-2x">
410+
<span className="fa-stack fa-2x">
411411
<Icon name="square" stack={2} />
412412
<Icon kind="brands" name="twitter" stack={1} inverse />
413413
</span>
414-
<span class="fa-stack fa-2x">
414+
<span className="fa-stack fa-2x">
415415
<Icon name="circle" stack={2} />
416416
<Icon name="flag" stack={1} inverse />
417417
</span>
418-
<span class="fa-stack fa-2x">
418+
<span className="fa-stack fa-2x">
419419
<Icon name="square" stack={2} />
420420
<Icon name="terminal" stack={1} inverse />
421421
</span>
422-
<span class="fa-stack fa-4x">
422+
<span className="fa-stack fa-4x">
423423
<Icon name="square" stack={2} />
424424
<Icon name="terminal" stack={1} inverse />
425425
</span>
426-
<span class="fa-stack fa-2x">
426+
<span className="fa-stack fa-2x">
427427
<Icon name="camera" stack={1} />
428428
<Icon name="ban" stack={2} className="text-danger" />
429429
</span>

‎document/source/components/Popover.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { Example } from '../../../source/component/Example';
2626
```JavaScript
2727
import { render } from 'web-cell';
2828
import { PopoverBox } from 'boot-cell/source/Prompt/Popover';
29+
import { Button } from 'boot-cell/source/Form/Button';
2930

3031
render(
3132
<PopoverBox
@@ -68,6 +69,7 @@ render(
6869
```JavaScript
6970
import { render, Fragment } from 'web-cell';
7071
import { PopoverBox } from 'boot-cell/source/Prompt/Popover';
72+
import { Button } from 'boot-cell/source/Form/Button';
7173

7274
render(
7375
<Fragment>

0 commit comments

Comments
 (0)