Container

Holds page content to a readable width and centres it.

Sakura no Uta

A container holds its content to a readable width and centres it on the page. The inset on either side follows the screen: 16 pixels when narrow, 24 when wide.

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

<template>
  <Stack gap="none" class="bg-inset w-full rounded-md py-8">
    <Container size="sm">
      <Stack gap="xs">
        <Heading :level="3" size="lg">Sakura no Uta</Heading>
        <Text tone="muted">
          A container holds its content to a readable width and centres it on the page. The inset on
          either side follows the screen: 16 pixels when narrow, 24 when wide.
        </Text>
      </Stack>
    </Container>
  </Stack>
</template>

vue

Usage

import { Container } from '@hina-ui/vue'

Container caps the width of its content and centres it in the parent, with an inset on either side: 16 pixels when narrow, 24 above the sm breakpoint.

Centred content, held to a width

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

<template>
  <Stack gap="none" class="bg-inset w-full rounded-md py-4">
    <Container>
      <Card class="grid h-16 place-items-center">Centred content, held to a width</Card>
    </Container>
  </Stack>
</template>

vue

Examples

Sizes

The four widths are 768, 1024, 1152 and 1280 pixels. Prose pages take sm; lists and dashboards take lg or xl.

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

  const sizes = ['sm', 'md', 'lg', 'xl'] as const
</script>

<template>
  <Stack class="w-full">
    <Stack v-for="size in sizes" :key="size" gap="none" class="bg-inset w-full rounded-md py-3">
      <Container :size="size">
        <Card class="grid h-10 place-items-center text-sm" :padded="false">{{ size }}</Card>
      </Container>
    </Stack>
  </Stack>
</template>

vue

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Maximum width of the content
`as`	`string`	`'div'`	The rendered tag
`class`	`string`	—	Classes appended to the container

Slot	Description
`default`	The children