Edit the data attributes on the tc-header component above to customise the header text. You can change the image in the image slot by linking to an external image as above or adding a local image to the img folder eg <img src="img/image-name.jpg" alt="Describe the image" />.
Grids, Cards, Icons and Logos
Standard Grid
Use a div with class grid to organise content in a grid.
Use the data attributes on tc-card to set the card color and a headline stat.
Use the icon slot and i tag to add a FontAwesome icon. We're currently using the Free Solid icons.
Use the content slot to add any other content. You can insert charts and images here too.
If there's an odd number of grid elements, the final item will span full width. On smaller devices all elements will span full width
Icon Grid
There is a second grid style for smaller items such as icons and logos. You can apply this to a div with the icon-grid class.
The tc-logo component gives you the Tranquil City logo by default, with switching for light and dark modes. You can also use this component to add custom logos with theme switching.
For standard icons/logos, use can use a normal img element.
The starter project comes with some useful logos and icons in the img folder, such as the SDG icons.
Data visualisation
We can use Observable Plot (which comes bundled with Observable Framework), to create data visualisations. We can also plug in to any other libraries, such as Mapbox GL JS for maps.
It's recommended to put each visualisation inside a tc-card. And then each of those in a <div class="grid">, even if you will only have one element. This will produce more consistent styling and also negate some quirks. HTML in Markdown
Single series
Within the card you can add your code to the content slot. For a single series plot like this, the line will take the parent colour.
You can also add extra text and even an icon grid below the chart:
Multiple series
For multi-series lines, Plot will add it's own colors by default. You can customise these in the config under color.range which will expect an array. Note: this may vary for different chart types.
You can add style tokens from the js/tokens/tokens.json file to the color range which is imported here. Eg. tokens.ColorForest500.
Try to use colours that are in contrast to the background, and that work in light and dark modes. So colours around the 500 mark in terms of shade. This should get you up and running for trialling this out. In the future we will add proper tokens and guides for using colour in data.
Complex visualisations
This is a more complex example which handles most of the set up in a separate code block. The code is added in this card using the function created in the code block.
The JS design tokens are added throughout to add colour. The currentColor references the parent text color, so it can adapt to different themes.
Mapbox
This is a code sample for Mapbox. You'll need to add your access token and style reference to display the map properly.