GkContainer

Constrains content width for readable line lengths. maxWidth maps to sm / md / lg / full.

When to use

Use for page-level content boundaries and readable text widths in dashboards and docs-like views.

Live Examples

Narrow max width

sm max-width with default horizontal padding.

Narrow container with horizontal padding.

vue

<script setup lang="ts">
import { GkContainer } from 'god-kit/vue'
</script>

<template>
  <div class="gk-doc-demo gk-doc-demo--dark">
    <GkContainer max-width="sm">
      <p class="gk-doc-p">
        Narrow container with horizontal padding.
      </p>
    </GkContainer>
  </div>
</template>

<style scoped>
.gk-doc-p {
  margin: 0;
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

Full width, no padding

full removes the side padding for bleed layouts.

Edge to edgewith stack

vue

<script setup lang="ts">
import { GkContainer, GkStack } from 'god-kit/vue'
</script>

<template>
  <GkContainer max-width="full" :padded="false">
    <GkStack direction="row" :gap="4">
      <span>Edge to edge</span>
      <span>with stack</span>
    </GkStack>
  </GkContainer>
</template>

Section landmark

tag="section" for a named document region.

Use semantic tags when the container represents a landmark region.

vue

<script setup lang="ts">
import { GkContainer } from 'god-kit/vue'
</script>

<template>
  <GkContainer tag="section" max-width="sm">
    <p class="gk-doc-p">
      Use semantic tags when the container represents a landmark region.
    </p>
  </GkContainer>
</template>

<style scoped>
.gk-doc-p {
  margin: 0;
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

API

Props

Prop	Type	Default	Description
tag	string	'div'	Root element
maxWidth	'sm' | 'md' | 'lg' | 'full'	'md'	Max width
padded	boolean	true	Horizontal padding

Slots

Slot	Description
default	Content

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Choose semantic tag values (section, main, aside) when container boundaries map to landmarks.
• Keep heading hierarchy meaningful inside constrained regions.

Related components

• GkStack
• GkGrid
• GkDivider
• GkNavigationDrawer