card styles

docs/grid.md

@@ -0,0 +1,56 @@
+---
+toc: false
+theme: [auto-alt, wide]
+---
+
+```js
+import {resize} from "npm:@observablehq/dash";
+```
+
+```js
+function AppleStockChart({width}) {
+  return Plot.plot({
+    title: "Apple stock price",
+    subtitle: "The price of Apple stock continues to climb.",
+    width,
+    y: {grid: true},
+    marks: [
+      Plot.ruleY([0]),
+      Plot.lineY(aapl, {x: "Date", y: "Close", tip: true})
+    ]
+  });
+}
+```
+
+# Grid test
+
+<div class="grid grid-cols-4">
+  <div class="card">
+    <h2>This card has a title</h2>
+    <h3>And a subtitle, too</h3>
+    <p>You can put paragraphs of text inside a card, also. But I wouldn’t put too much text inside a card as it’s a bit cramped.</p>
+    <p>Here’s another paragraph.</p>
+  </div>
+  <div class="card">
+    <h2>Hello, world!</h2>
+  </div>
+  <div class="card">
+    <h2>Card three</h2>
+  </div>
+  <div class="card">
+    <h2>Card four</h2>
+  </div>
+</div>
+
+<div class="grid grid-cols-2">
+  <div class="card">${resize((width) => AppleStockChart({width}))}</div>
+  <div class="card">${resize((width) => AppleStockChart({width}))}</div>
+</div>
+
+<div class="grid grid-cols-4">
+  <div class="card grid-colspan-3">${resize((width) => AppleStockChart({width}))}</div>
+  <div>
+    <p>You don’t need to put a border around a grid cell. You can use the grid layout without the <code>card</code> class and it looks like this. You might do this to put some explanatory text adjacent to a chart.</p>
+    <p>Here lies another paragraph.</p>
+  </div>
+</div>

src/style/card.css

@@ -0,0 +1,29 @@
+.card {
+  background: var(--theme-background-alt);
+  border: solid 1px var(--theme-foreground-faintest);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  font: 14px var(--sans-serif);
+}
+
+.card h2,
+.card h3 {
+  font-size: inherit;
+}
+
+.card h2 {
+  font-weight: 500;
+  font-size: 15px;
+}
+
+.card h3 {
+  font-weight: 400;
+  color: var(--theme-foreground-muted);
+}
+
+.card h2 ~ svg,
+.card h3 ~ svg,
+.card h2 ~ p,
+.card h3 ~ p {
+  margin-top: 1rem;
+}

src/style/default.css

@@ -1,5 +1,6 @@
 @import url("./global.css");
 @import url("./layout.css");
 @import url("./grid.css");
+@import url("./card.css");
 @import url("./inspector.css");
 @import url("./plot.css");

src/style/grid.css

@@ -7,14 +7,6 @@
   display: grid;
   gap: 1rem;
   grid-auto-rows: 1fr;
-  font: 14px var(--sans-serif);
-}
-
-.grid > * {
-  background: var(--theme-background-alt);
-  border: solid 1px var(--theme-foreground-faintest);
-  border-radius: 0.75rem;
-  padding: 1rem;
 }
 
 .grid svg {
@@ -25,6 +17,14 @@
   margin: 0;
 }
 
+.grid > * > p:first-child {
+  margin-top: 0;
+}
+
+.grid > * > p:last-child {
+  margin-bottom: 0;
+}
+
 @container (min-width: 640px) {
   .grid-cols-2,
   .grid-cols-4 {