Published
Edited
Mar 18, 2021
1 star
cardStyle = html`<style>
/* containers */
#card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #FBD8C2;
}
#canvas-container {
border: 1px solid red;
width: 100%;
text-align: center;
}
#canvas-container canvas {
display: inline;
}
/* inner text */
#card img {
width: 150px;
}
#card .test-image {
border: 1px solid blue;
position: absolute;
top: 0px;
left: 0px;
}
#card h5 {
width: 80%;
text-align: center;
padding: 12px 0px 0px 0px;
}
#card p {
width: 80%;
margin: 0px;
text-align: center;
padding: 12px 50px 0px 50px;
font-size: 24px;
}
#card .link {
position: absolute;
bottom: 0;
left: 0;
width: 600px;
background-color: rgba(0, 0, 0, 0.35);
color: #fff;
text-align: center;
padding: 12px 0px 12px 0px;
}
/* sizes */
#card.ig_600x600 {
width: 600px;
height: 600px;
}
#card.tw_1200x675 {
width: 1200px;
height: 675px;
}
.step {
display: flex;
flex-direction: row;
align-items: center;
}
.step img {
width: 160px;
}
</style>`
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.
