Skip to main content
The presentation is more “festival poster lineup” when sorted by the sizing value, and more “cloudy” when sorted by a different value.
Sorted by sizing valueSorted by a different value

​
Example code

Fonts are clamped between --min-font-size and --max-font-size. If you use container query units (cqw) for the max font size, the type will adjust to the width of the dashboard tile. Note that the max font size is a bit of a “magic number” meaning you’ll have to adjust it based on the length of the words in your data set, the number of words in the results, and the desired size of the tile. The values in the example below were selected for this particular data set. Example query showing calculation for percentage sizing and an example calculation for determining text color: 
<style>
.sky {
  --min-font-size: 10px; /* smallest text size */
  --max-font-size: 17cqw; /* biggest text sizes based on tile width */
  container-type: size;
  container-name: sky;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.clouds {
  text-align: center;
  display: flex;
  gap: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--max-font-size);
}
.cloud {
  display: inline-block;
  padding-inline: 0.25em;
  padding-block: 0;
  margin: 0;
  vertical-align: center;
  white-space: nowrap;
}
.cloud.yes { color: darkmagenta; }
.cloud.no { color: magenta; }

</style>
<article class="sky">
  <div class="clouds">
  {{#result}}
    <p class="cloud {{calc_2.value_static}}" style="font-size: clamp(var(--min-font-size), calc(1em * {{calc_3.value_static}}), 1em); line-height: 1;">{{users.state.value}}</p>
  {{/result}}
  </div>
</article>