Customer Success at Observable.
mdColumns = (
columns,
colors = [
"#f7fbff",
"#e3eef9",
"#cfe1f2",
"#b5d4e9",
"#93c3df",
"#6daed5",
"#4b97c9",
"#2f7ebc",
"#1864aa",
"#0a4a90",
"#08306b"
]
) => {
const c = columns.map(
(d, i) => `
<div class="column" style="background-color: ${colors[i]}">
${d.innerHTML}
</div>`
);
return html`
<style>
@media only screen and (min-width: 600px) {
.board {
display: grid;
_width: 100%;
grid-template-columns: repeat( auto-fit, [col-start] minmax(100px, 1fr) [col-end] );
grid-gap: 7px;
}
}
.board > .column {
color: black;
border-radius: 5px;
font-size: smaller;
padding: 10px 10px 10px 0px;
overflow: hidden;
}
.board > .column > h1,
.board > .column > h2,
.board > .column > h3,
.board > .column > h4,
.board > .column > p {
padding-left: 10px;
}
.board > .column > p,
.board > .column > ul {
font-family: Arial;
}
.board > .column > h1,
.board > .column > h2,
.board > .column > h3 {
margin-bottom: 10px;
}
</style>
<div class="board">
${c}
</div>
`;
}
snippet
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.
