A UI language built for Vue. v1.7.16 is out
UI
GuideDesignComponentsChangelog
GitHub repository10

Section

A titled section of content.

Source

Synopsis

The story is set in a small seaside town.

Characters

Three leads and a handful of supporting characters.

Staff

Writing, art and music.

<script setup lang="ts">
  import { Card, PageBody, Section, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full">
    <PageBody>
      <Section title="Synopsis">
        <Text size="sm" tone="muted">The story is set in a small seaside town.</Text>
      </Section>
      <Section title="Characters">
        <Text size="sm" tone="muted">Three leads and a handful of supporting characters.</Text>
      </Section>
      <Section title="Staff">
        <Text size="sm" tone="muted">Writing, art and music.</Text>
      </Section>
    </PageBody>
  </Card>
</template>
vue

Usage

import { Section } from '@hina-ui/vue'
ts

Section groups a run of content together with its heading. title renders as a second-level heading, and the children of the section share one spacing rhythm.

It usually sits inside PageBody, with a page made of several sections stacked vertically. The gap between sections comes from PageBody; the gap within one comes from Section.

Release

Released by Makura on 2015-10-23 for Windows.

The title renders as a second-level heading, spaced from the body by the component. 

<script setup lang="ts">
  import { Card, Section, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full">
    <Section title="Release">
      <Text size="sm" tone="muted">Released by Makura on 2015-10-23 for Windows.</Text>
      <Text size="sm" tone="muted">
        The title renders as a second-level heading, spaced from the body by the component.
      </Text>
    </Section>
  </Card>
</template>
vue

Examples

Without a title

Leave title out and no heading is rendered — only the grouping and the internal spacing remain. Use it for content that needs no name but still belongs together.

FantasySchool

Without a title, no heading is rendered — only the grouping and spacing remain. 

<script setup lang="ts">
  import { Card, Section, Tag, Inline, Text } from '@hina-ui/vue'
</script>

<template>
  <Card class="w-full">
    <Section>
      <Inline gap="xs">
        <Tag>Fantasy</Tag>
        <Tag>School</Tag>
      </Inline>
      <Text size="sm" tone="muted">
        Without a title, no heading is rendered — only the grouping and spacing remain.
      </Text>
    </Section>
  </Card>
</template>
vue

Anchor targets

Give the section an id and it becomes an anchor target for Anchor. It carries its own scroll margin, so a heading jumped to does not end up flush against the top of the container.

Overview

Body text for this section.

Scrolling or clicking an entry on the right updates the current position.

Characters

Body text for this section.

Scrolling or clicking an entry on the right updates the current position.

Staff

Body text for this section.

Scrolling or clicking an entry on the right updates the current position. 

<script setup lang="ts">
  import { Anchor, Card, Inline, ScrollArea, Section, Text } from '@hina-ui/vue'

  const items = [
    { id: 'sec-intro', label: 'Overview' },
    { id: 'sec-cast', label: 'Characters' },
    { id: 'sec-staff', label: 'Staff' },
  ]
</script>

<template>
  <Inline gap="lg" align="start" class="w-full">
    <Card :padded="false" class="min-w-0 flex-1 overflow-hidden">
      <ScrollArea class="h-56">
        <Section v-for="item in items" :id="item.id" :key="item.id" :title="item.label" class="p-4">
          <Text size="sm" tone="muted">Body text for this section.</Text>
          <Text size="sm" tone="muted">
            Scrolling or clicking an entry on the right updates the current position.
          </Text>
        </Section>
      </ScrollArea>
    </Card>
    <Anchor :items="items" class="w-28 shrink-0" />
  </Inline>
</template>
vue

Behaviour

  • Renders as a section element whose children stack vertically, 4 units apart.
  • The heading is always second level and does not shift with nesting depth.
  • Scrolling to the section leaves 6 units of margin above it.

Accessibility

  • A section element counts as a landmark only when it has an accessible name, so a section with a title is listed as one and a section without is not.
  • The heading level is fixed at two; a page’s top-level heading should come from PageHeader.

API

Props

Prop
Type
Default
Description
title
string
—
Section heading, rendered at level two
id
string
—
Element id, used as an anchor target
class
string
—
Classes appended to the root

Slots

Slot
Description
default
Content of the section