Pick a component

Section

An opinionated container to render sections with a title, value, description and content.

<!-- prettier-ignore -->
<Section>
  <h3 slot="title">Section Title</h3>
  <p slot="end">123</p>
  <p slot="description">This is the section description.</p>
  <ul>
    <li>Maybe render a list</li>
    <li>Of items inside</li>
    <li>The section</li>
  </ul>
</Section>
Property Description Type Default
testId Add a data-tid attribute to the DOM, useful for test purpose. string or undefined undefined

Slots

Slot name Description
title Title of the section.
end Set in line with the title in the other side. Used in case the title refers to a value.
description Slot below the title and value but above the content. It should introduce or explain the content
Default slot The content inside the section

Showcase

The component is within a div with a background to highlight the component exactly as it is.

IMPORTANT: The component has no internal padding nor margin. The spacing with the other components is responsibility of the parent.

Simple example

Title

123

This is a description

Here would go any content that we want.

It can be more than one element.

They would all go here.

No description example

Title

123

Here would go any content that we want.

It can be more than one element.

They would all go here.

Real production example

Advanced details & settings

Advanced preferences for managing your neuron

Neuron ID
2489875486030084829
Date created
2023-06-24, 18:00:51 UTC
Age
0 years

Real production code

Below is the code for the real production example:

<div class="wrapper">
  <!-- prettier-ignore -->
  <Section>
    <h3 slot="title">Advanced details & settings</h3>
    <p slot="description" class="description">
      Advanced preferences for managing your neuron
    </p>
    <div class="attributes">
      <KeyValuePair>
        <span slot="key" class="label">Neuron ID</span>
        <span slot="value" class="value">2489875486030084829</span>
      </KeyValuePair>
      <KeyValuePair>
        <span slot="key" class="label">Date created</span>
        <span slot="value" class="value">2023-06-24, 18:00:51 UTC</span>
      </KeyValuePair>
      <KeyValuePair>
        <span slot="key" class="label">Age</span>
        <span slot="value" class="value">0 years</span>
      </KeyValuePair>
      <button class="secondary">Split Neuron</button>
    </div>
  <!-- prettier-ignore -->
  </Section>
</div>

<style>
  .wrapper {
    background-color: var(--card-background);
    margin: var(--padding-2x) 0;
    & p,
    h3, h5 {
      margin: 0;
    }
  }

  .attributes {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--padding-2x);
  }
</style>