Published
Edited
Apr 4, 2022
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Shoelace = import('https://cdn.skypack.dev/@shoelace-style/shoelace@2.0.0-beta.72?min')
Insert cell
stylesheet = html`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.72/dist/themes/light.css">`

Insert cell
html`<sl-button size="small">Click me</sl-button>`
Insert cell
colorpickerHTML = html`<sl-color-picker></sl-color-picker>`
Insert cell
{
const colorPicker = colorpickerHTML
colorPicker.swatches = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
}
Insert cell
<sl-card class="card-overview">
<img
slot="image"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
>

<strong>Mittens</strong><br>
This kitten is as cute as he is playful. Bring him home today!<br>
<small>6 weeks old</small>

<div slot="footer">
<sl-button type="primary" pill>More Info</sl-button>
<sl-rating></sl-rating>
</div>
</sl-card>

<style>
.card-overview {
max-width: 300px;
}

.card-overview small {
color: rgb(var(--sl-color-neutral-500));
}

.card-overview [slot="footer"] {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more