Elanor

Section

Last updated

A named part of a page, with an optional separator line semantic.dimension.space.gap.large (24px) below its content. Section adds no border, padding, or width cap.

Members

Invite collaborators and assign workspace roles.
Code
demo.tsx 
import {Heading, Section, Stack, Text} from '@earendil-works/elanor-react';

export default function SectionDemo() {
  return (
    <Section.Root aria-labelledby="members-heading">
      <Section.Content>
        <Stack gap="small">
          <Heading level={2} id="members-heading">
            Members
          </Heading>
          <Text>Invite collaborators and assign workspace roles.</Text>
        </Stack>
      </Section.Content>
      <Section.Separator />
    </Section.Root>
  );
}

Usage

import {Heading, Section} from '@earendil-works/elanor-react';

<Section.Root aria-labelledby="members-heading">
  <Section.Content>
    <Heading level={2} id="members-heading">
      Members
    </Heading>
  </Section.Content>
  <Section.Separator />
</Section.Root>;

Root renders a section; name it with its heading through aria-labelledby. Content renders a div; lay out its children with Stack or Grid. Leave out Separator for no line.

Separator span

The separator sits in its own 12-column grid with default gutters. span sets how many tracks it covers, optionally per container breakpoint. To align content with a shorter line, use a 12-column Grid with default gutters inside Content, as in this demo.

The separator’s grid measures its own width, not the parent’s tracks. For shared tracks, compose Separator and Grid yourself.

Project access

Choose which projects each team can open.
Code
separator-span.tsx 
import {Grid, Heading, Section, Stack, Text} from '@earendil-works/elanor-react';

export default function SectionSeparatorSpan() {
  return (
    <Section.Root aria-labelledby="access-heading">
      <Section.Content>
        <Grid.Root>
          <Grid.Item span={{base: 'full', small: 6}}>
            <Stack gap="small">
              <Heading level={3} id="access-heading">
                Project access
              </Heading>
              <Text>Choose which projects each team can open.</Text>
            </Stack>
          </Grid.Item>
        </Grid.Root>
      </Section.Content>
      <Section.Separator span={{base: 'full', small: 6}} />
    </Section.Root>
  );
}

API

Section.Root

Renders <section>. Accepts its HTML attributes and ref.

Section.Content

Renders <div>. Accepts its HTML attributes and ref.

Section.Separator

PropTypeDefaultDescription
span1 | … | 12 | 'full' | Partial<Record<GridBreakpoint, GridSpan>>'full'Grid tracks the line spans, out of 12. Accepts container breakpoint keys, like Grid.Item.
orientation'horizontal'-Only horizontal is supported.

Renders <div>. Also accepts its HTML attributes, ref, and render.

↑↓to select↵to openEscto close