Skip to content

Commit 78b3f1e

Browse files
mansonamansona
authored
Merge pull request #280 from ember-learn/update-cards-docs
Add docs for the new Cards API
2 parents 4563e00 + a7ac7ac commit 78b3f1e

File tree

2 files changed

+67
-98
lines changed

2 files changed

+67
-98
lines changed

‎docs/components/card.md

+25-98
Original file line numberDiff line numberDiff line change
@@ -16,63 +16,27 @@ You can also add an image to the card using the `@image` parameter:
1616

1717
```html
1818
<ul class="list-unstyled layout">
19-
<EsCard @image="/ember-logo.png" class="lg:col-2">
19+
<EsCard @image={{hash src="/ember-logo.png"}} class="lg:col-2">
2020
This is a card
2121
</EsCard>
2222
</ul>
2323
```
2424

25-
By default images will be considered decorative and ignored by screen readers, but if you want to provide an alt text for the image you can provide it with the `@alt` parameter:
25+
By default images will be considered decorative and ignored by screen readers, but if you want to provide an alt text for the image you can provide it with the `alt` key in the `@image` hash:
2626

2727
```html
2828
<ul class="list-unstyled layout">
29-
<EsCard @image="/ember-logo.png" @alt="Ember Logo" class="lg:col-2">
29+
<EsCard @image={{hash src="/ember-logo.png" alt="Ember Logo"}} class="lg:col-2">
3030
This is a card
3131
</EsCard>
3232
</ul>
3333
```
3434

35-
By default the card will have the image to the left of the content. If you want to make the card a **vertical** card you can apply the `vertical` attribute;
35+
Here is a fuller example of a card that has more structure in the card body
3636

3737
```html
3838
<ul class="list-unstyled layout">
39-
<EsCard class="lg:col-2" @image="/ember-logo.png" vertical>
40-
This is a card
41-
</EsCard>
42-
</ul>
43-
```
44-
45-
It is unlikely that you will be using this vertical display of a card with a full width container so you might want to use a layout grid to contain the card:
46-
47-
```html
48-
<ul class="list-unstyled layout">
49-
<EsCard @image="/ember-logo.png" vertical class="lg:col-2">
50-
this is a card
51-
</EsCard>
52-
<EsCard @image="/ember-logo.png" vertical class="lg:col-2">
53-
this is another card
54-
</EsCard>
55-
</ul>
56-
```
57-
58-
If you want the image to take up the full available width of the card you can apply the `full-image` attribute:
59-
60-
```html
61-
<ul class="list-unstyled layout">
62-
<EsCard @image="/ember-logo.png" vertical full-image class="lg:col-2">
63-
this is a card
64-
</EsCard>
65-
<EsCard @image="/ember-logo.png" vertical full-image class="lg:col-2">
66-
this is another card
67-
</EsCard>
68-
</ul>
69-
```
70-
71-
And here is a fuller example of a vertical, full-image card that has more structure in the card body
72-
73-
```html
74-
<ul class="list-unstyled layout">
75-
<EsCard @image="/ember-logo.png" vertical full-image class="lg:col-2">
39+
<EsCard @image={{hash src="/ember-logo.png"}} class="lg:col-2">
7640
<h3>Ember.js</h3>
7741
<p>A framework for ambitious web developers. Try it out!</p>
7842
<div class="flex-horizontal-between">
@@ -83,85 +47,48 @@ And here is a fuller example of a vertical, full-image card that has more struct
8347
</ul>
8448
```
8549

86-
You can also create a card that allows a link to an external resource using `<a href=""></a>` somewhere in the card body, most likely in the header:
50+
And here is a full card based page layout (which also makes use of the [ESLinkCard](/components/link-card) component) that might be useful when building sites using this component:
8751

8852
```html
89-
<ul class="list-unstyled layout">
90-
<EsCard class="lg:col-3" @image="/images/icons/discuss-logo.svg">
91-
<h3>
92-
<a href="http://discuss.emberjs.com">Discussion Forum</a>
93-
</h3>
94-
<p>Post and search longer-form questions in our public forum.</p>
95-
</EsCard>
96-
</ul>
97-
```
98-
99-
But if you would like the whole card to become interactive and act as a link you can add the `card-link` attribute. This will stretch the link to be the full area of the card:
100-
101-
```html
102-
<ul class="list-unstyled layout">
103-
<EsCard class="lg:col-3" @image="/images/icons/discuss-logo.svg" card-link>
104-
<h3>
105-
<a href="http://discuss.emberjs.com">Discussion Forum</a>
106-
</h3>
107-
<p>Post and search longer-form questions in our public forum.</p>
108-
</EsCard>
109-
</ul>
110-
```
111-
112-
Here is what that looks like on a dark background
113-
114-
```html
115-
<div class="bg-dark">
116-
<ul class="list-unstyled layout">
117-
<EsCard class="lg:col-3" @image="/images/icons/mic-icon.svg" card-link>
118-
<h3>
119-
<a href="http://discuss.emberjs.com">Discussion Forum</a>
120-
</h3>
121-
<p>Post and search longer-form questions in our public forum.</p>
122-
</EsCard>
123-
</ul>
124-
</div>
125-
```
126-
127-
And here is a full card based page layout that might be useful when building sites using this component:
128-
129-
```html
130-
<ul class="list-unstyled layout">
131-
<EsCard class="lg:col-3" @image="/images/icons/discuss-logo.svg" card-link>
132-
<h3>
133-
<a href="http://discuss.emberjs.com">Discussion Forum</a>
134-
</h3>
53+
<ul class="list-unstyled layout my-3">
54+
<EsLinkCard
55+
class="lg:col-3"
56+
@href="http://discuss.emberjs.com"
57+
@title="Discussion Forum"
58+
@icon="discuss-logo"
59+
>
13560
<p>Post and search longer-form questions in our public forum.</p>
136-
</EsCard>
137-
<EsCard class="lg:col-3" @image="/images/icons/discord-logo.svg" card-link>
138-
<h3>
139-
<a href="https://discord.gg/emberjs">Discord community chat</a>
140-
</h3>
61+
</EsLinkCard>
62+
<EsLinkCard
63+
class="lg:col-3"
64+
@href="https://discord.gg/emberjs"
65+
@title="Discord community chat"
66+
@icon="discord-logo"
67+
>
14168
<p>Join our real-time chat server to connect with other developers and get answers.</p>
142-
</EsCard>
69+
</EsLinkCard>
14370
</ul>
14471

14572
<p>
14673
Beyond our core online channels, you can dig deeper with these learning resources from the
14774
community members
14875
</p>
14976

150-
<ul class="list-unstyled layout">
151-
<EsCard class="lg:col-2 text-center" vertical @image="/images/icons/mic-icon.svg">
77+
<ul class="list-unstyled layout my-3">
78+
<EsCard class="lg:col-2 text-center" @icon="mic-icon">
15279
<h3>Podcasts</h3>
15380
<ul class="list-unstyled">
15481
<li><a href="embermap somewhere">Ember Weekly</a></li>
15582
<li><a href="embermap somewhere">Ember Map Podcast</a></li>
15683
</ul>
15784
</EsCard>
158-
<EsCard class="lg:col-2 text-center" vertical @image="/images/icons/book-icon.svg">
85+
<EsCard class="lg:col-2 text-center" @icon="book-icon">
15986
<h3>Books</h3>
16087
<ul class="list-unstyled">
16188
<li><a href="embermap somewhere">Rock and Roll with Ember.js</a></li>
16289
</ul>
16390
</EsCard>
164-
<EsCard class="lg:col-2 text-center" vertical @image="/images/icons/tv-icon.svg">
91+
<EsCard class="lg:col-2 text-center" @icon="tv-icon">
16592
<h3>Videos</h3>
16693
<ul class="list-unstyled">
16794
<li><a href="embermap somewhere">Ember Map</a></li>

‎docs/components/link-card.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Link Card
2+
3+
An `<EsLinkCard />` is a card that allows a link to an external resource.
4+
5+
```html
6+
<ul class="list-unstyled layout">
7+
<EsLinkCard class="lg:col-3" @href="http://discuss.emberjs.com" @title="Discussion Forum">
8+
<p>Post and search longer-form questions in our public forum.</p>
9+
</EsLinkCard>
10+
</ul>
11+
```
12+
13+
You can add an icon to the card with `@icon`
14+
15+
```html
16+
<ul class="list-unstyled layout">
17+
<EsLinkCard
18+
class="lg:col-3"
19+
@href="http://discuss.emberjs.com"
20+
@title="Discussion Forum"
21+
@icon="discuss-logo"
22+
>
23+
<p>Post and search longer-form questions in our public forum.</p>
24+
</EsLinkCard>
25+
</ul>
26+
```
27+
28+
Here is what that looks like on a dark background
29+
30+
```html
31+
<div class="bg-dark">
32+
<ul class="list-unstyled layout">
33+
<EsLinkCard
34+
class="lg:col-3"
35+
@href="http://discuss.emberjs.com"
36+
@title="Discussion Forum"
37+
>
38+
<p>Post and search longer-form questions in our public forum.</p>
39+
</EsLinkCard>
40+
</ul>
41+
</div>
42+
```

0 commit comments

Comments
 (0)