Skip to content

Commit 4fa1abc

Browse files
allisonhorstAllison HorsttreborcinxmoFil
authored
Cards (#561)
Adds `card` class --------- Co-authored-by: Allison Horst <[email protected]> Co-authored-by: Robert Harris <[email protected]> Co-authored-by: Cindy <[email protected]> Co-authored-by: Philippe Rivière <[email protected]>
1 parent a5b11f8 commit 4fa1abc

File tree

1 file changed

+174
-0
lines changed

1 file changed

+174
-0
lines changed

‎docs/layout/card.md

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# Cards
2+
3+
The `card` class adds polished styling to page content including a background and border color determined by the page theme, default padding, and an optional title and subtitle that match title styling for other components.
4+
5+
<div class="card">
6+
<h2>This is a card</h2>
7+
<h3>Cards add polished formatting to page content.</h3>
8+
${
9+
Plot.plot({
10+
marks: [
11+
Plot.cell(weather, {x: d => d.date.getUTCDate(), y: d => d.date.getUTCMonth(),fill: "temp_max"})
12+
]
13+
})
14+
}
15+
</div>
16+
17+
```html run=false
18+
<div class="card">
19+
<h2>This is a card</h2>
20+
<h3>Cards add polished formatting to page content.</h3>
21+
${
22+
Plot.plot({
23+
marks: [
24+
Plot.cell(weather, {x: d => d.date.getUTCDate(), y: d => d.date.getUTCMonth(),fill: "temp_max"})
25+
]
26+
})
27+
}
28+
</div>
29+
```
30+
31+
## Card content
32+
33+
Cards can contain whatever content you like, including text, images, charts, tables, inputs, and more.
34+
35+
<div class="grid grid-cols-2">
36+
<div class="card">
37+
<h2>Lorem ipsum</h2>
38+
<p>Id ornare arcu odio ut sem nulla pharetra. Aliquet lectus proin nibh nisl condimentum id venenatis a. Feugiat sed lectus vestibulum mattis ullamcorper velit. Aliquet nec ullamcorper sit amet. Sit amet tellus cras adipiscing. Condimentum id venenatis a condimentum vitae. Semper eget duis at tellus. Ut faucibus pulvinar elementum integer enim.</p>
39+
<p>Et malesuada fames ac turpis. Integer vitae justo eget magna fermentum iaculis eu non diam. Aliquet risus feugiat in ante metus dictum at. Consectetur purus ut faucibus pulvinar.</p>
40+
</div>
41+
<div class="card">
42+
<img src="../javascript/horse.jpg" width="100%">
43+
</div>
44+
<div class="card">
45+
${
46+
Plot.plot({
47+
marks: [
48+
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
49+
Plot.ruleY([0])
50+
]
51+
})
52+
}
53+
</div>
54+
<div class="card">
55+
${pickIndustry}
56+
${Inputs.table(industries.filter(d => d.industry === industryInput))}
57+
</div>
58+
</div>
59+
60+
```js echo
61+
const pickIndustry = Inputs.select(industries.map(d => d.industry), {unique: true, label: "Industry:"});
62+
const industryInput = view(pickIndustry)
63+
```
64+
65+
```html run=false
66+
<div class="grid grid-cols-2">
67+
<div class="card">
68+
<h2>Lorem ipsum</h2>
69+
<p>Id ornare arcu odio ut sem nulla pharetra. Aliquet lectus proin nibh nisl condimentum id venenatis a. Feugiat sed lectus vestibulum mattis ullamcorper velit. Aliquet nec ullamcorper sit amet. Sit amet tellus cras adipiscing. Condimentum id venenatis a condimentum vitae. Semper eget duis at tellus. Ut faucibus pulvinar elementum integer enim.</p>
70+
<p>Et malesuada fames ac turpis. Integer vitae justo eget magna fermentum iaculis eu non diam. Aliquet risus feugiat in ante metus dictum at. Consectetur purus ut faucibus pulvinar.</p>
71+
</div>
72+
<div class="card">
73+
<img src="../javascript/horse.jpg" width="100%">
74+
</div>
75+
<div class="card">
76+
${
77+
Plot.plot({
78+
marks: [
79+
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
80+
Plot.ruleY([0])
81+
]
82+
})
83+
}
84+
</div>
85+
<div class="card">
86+
${pickIndustry}
87+
${Inputs.table(industries.filter(d => d.industry === industryInput))}
88+
</div>
89+
</div>
90+
```
91+
92+
## Title and subtitle
93+
94+
Card titles and subtitles are added with h2 and h3 headers, respectively, and match the title styling in [Observable Plot](https://observablehq.com/plot/features/plots#other-options):
95+
96+
<div class="grid grid-cols-2"">
97+
<div class="card">
98+
<h2>A card title added as an h2 element</h2>
99+
<h3>A card subtitle added as an h3 element</h3>
100+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
101+
<p>Massa sapien faucibus et molestie ac feugiat sed lectus. Sit amet volutpat consequat mauris nunc congue nisi. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
102+
</div>
103+
<div class="card">
104+
${
105+
Plot.plot({
106+
title: "A chart title added in Observable Plot",
107+
subtitle: "A chart subtitle added in Observable Plot",
108+
marks: [
109+
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
110+
]
111+
})
112+
}
113+
</div>
114+
</div>
115+
116+
```html run=false
117+
<div class="grid grid-cols-2"">
118+
<div class="card">
119+
<h2>A card title added as an h2 element</h2>
120+
<h3>A card subtitle added as an h3 element</h3>
121+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
122+
<p>Massa sapien faucibus et molestie ac feugiat sed lectus. Sit amet volutpat consequat mauris nunc congue nisi. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
123+
</div>
124+
<div class="card">
125+
${
126+
Plot.plot({
127+
title: "A chart title added in Observable Plot",
128+
subtitle: "A chart subtitle added in Observable Plot",
129+
marks: [
130+
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
131+
]
132+
})
133+
}
134+
</div>
135+
</div>
136+
```
137+
138+
## Content without cards
139+
140+
Page content does not have to be within a card. Below, explanatory text is added to the right of a card.
141+
142+
<div class="grid grid-cols-2"">
143+
<div class="card">
144+
${
145+
Plot.plot({
146+
color: {legend: true},
147+
marks: [
148+
Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", fill: "species", tip: true})
149+
]
150+
})
151+
}
152+
</div>
153+
<div>
154+
<p>Body mass (g) and flipper length (mm) for ${penguins.length} individual penguins (${penguins.filter(d => d.species === "Adelie").length} Adélie, ${penguins.filter(d => d.species === "Chinstrap").length} Chinstrap, and ${penguins.filter(d => d.species === "Gentoo").length} Gentoo) recorded on Dream, Biscoe, or Torgersen islands near Palmer Archipelago, Antarctica from 2007 — 2009. Data: <a href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0090081">K. B. Gorman et al. 2014.</a> </p>
155+
</div>
156+
</div>
157+
158+
```html run=false
159+
<div class="grid grid-cols-2"">
160+
<div class="card">
161+
${
162+
Plot.plot({
163+
color: {legend: true},
164+
marks: [
165+
Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", fill: "species", tip: true})
166+
]
167+
})
168+
}
169+
</div>
170+
<div>
171+
<p>Body mass (g) and flipper length (mm) for ${penguins.length} individual penguins (${penguins.filter(d => d.species === "Adelie").length} Adélie, ${penguins.filter(d => d.species === "Chinstrap").length} Chinstrap, and ${penguins.filter(d => d.species === "Gentoo").length} Gentoo) recorded on Dream, Biscoe, or Torgersen islands near Palmer Archipelago, Antarctica from 2007 — 2009. Data: <a href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0090081">K. B. Gorman et al. 2014.</a> </p>
172+
</div>
173+
</div>
174+
```

0 commit comments

Comments
 (0)