Published
Edited
Oct 3, 2018
html`
<style>
.pre-labelled {
display: flex;
justify-content: space-between;
}
.pre-labelled::before {
content: attr(data-css-label);
}
</style>
<div style="width: 300px">
<div class="pre-labelled" data-css-label="Delivery from">KFC</div>
<div class="pre-labelled" data-css-label="Delivery to">Hugo</div>
<div class="pre-labelled" data-css-label="Website"><a href="https://codewithhugo.com">codewithhugo.com</a></div>
</div>`
html`
<style>
.link::after {
content: " (" attr(href) ")";
}
</style>
<a href="https://codewithhugo.com" class="link">Link</a>
`
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.
