Labels - Component

Add a .label class to an element and it’ll reduce its contrast and spacing.

View full screen
Code

Source (Nunjucks)

<div class="flow">
  <p class="label">filename.js:</p>
  <pre><code>console.log('hello');</code></pre>
</div>

Output

<div class="flow">
  <p class="label">filename.js:</p>
  <pre><code>console.log('hello');</code></pre>
</div>

Information

Labels can be used to display a filename associated with a code snippet. They are designed to work with the flow utility and control spacing using the --flow-space custom property.