Skip to content
Kappa
Kappa
Resource List
@dicehub/kappav0.4.2

Resource List

Responsive resource pages with clear identity, controls, primary content, and optional contextual information.

Overview

ResourceListLayout supplies the responsive page structure. The application supplies resource data and controls filtering, sorting, loading, pagination, selection, and navigation.

Kappa componentPurpose
ResourceListLayoutPage identity, actions, primary resource region, and optional sticky sidebar.
ItemCompact resource rows with media, description, metadata, and actions.
InputSearch text in the toolbar slot.
DropdownType and sort filters with visible selected states.
MeterOptional usage context in the sidebar.

Examples

Complete

Page identity, actions, filtering, resource rows, and contextual usage in one responsive layout.

Resource List · completeOpen full example (new tab)

Resources

Projects and groups available in the Engineering namespace.
<script setup lang="ts">
import { Button, ResourceListLayout } from "@dicehub/kappa"
</script>

<template>
  <ResourceListLayout
    title="Resources"
    description="Projects and groups available in the Engineering namespace."
  >
    <template #icon><!-- Product icon --></template>
    <template #actions>
      <Button variant="primary">New resource</Button>
    </template>
    <template #toolbar><!-- Search and filters --></template>

    <!-- List, loading state, empty state, and pagination -->

    <template #aside><!-- Usage and contextual help --></template>
  </ResourceListLayout>
</template>

Compact

Reduced page spacing and compact rows for dense technical workspaces.

Resource List · compactOpen full example (new tab)

Resources

Projects and groups available in the Engineering namespace.
<template>
  <ResourceListLayout
    density="compact"
    title="Resources"
    description="Projects and groups available in this namespace."
  >
    <!-- Compact resource rows -->
  </ResourceListLayout>
</template>

Minimal

The primary region can stand alone when the surrounding application already supplies page identity and controls.

Resource List · minimalOpen full example (new tab)
<template>
  <ResourceListLayout>
    <!-- The application supplies the surrounding header and controls. -->
    <!-- Render resource rows, an empty state, or a loading state here. -->
  </ResourceListLayout>
</template>

Installation

Import the block from @dicehub/kappa or the granular@dicehub/kappa/blocks/resource-list-layout path. Import the Kappa theme once in the application entry point.

import { ResourceListLayout } from "@dicehub/kappa"
import "@dicehub/kappa/styles/theme-kappa.css"

API and Composition

PropDefaultPurpose
title—Page heading. The title slot takes priority.
description—Supporting text below the heading.
densitydefaultdefault or compact page spacing.
sidebarSideendLogical start or end placement on wide containers.
stickySidebartrueKeeps contextual information visible on wide containers.

Slots: icon, title, description,actions, toolbar, aside, and the default resource region. Attributes, ARIA attributes, styles, and DOM listeners pass to the root.

The primary region stays first in document order. A start sidebar moves visually on wide containers, then returns below the primary region when space is limited. Container queries make the layout respond to its available space, not only to the viewport.

Accessibility

  • The title renders as the page's level-one heading. Do not add another level-one heading for the same page.
  • The optional icon is decorative. Put essential meaning in the title and description.
  • Give toolbar controls visible labels or accessible names. Announce result counts when filters change.
  • Use native links for resource navigation and buttons for row actions. Do not nest buttons in a linked row.
  • Loading, empty, and error states belong in the default slot, near the content they replace.

Styling

The block uses Kappa semantic colors, spacing, typography, radius, and shadow tokens in both themes. Optional layout variables are--kappa-resource-list-layout-content-max,--kappa-resource-list-layout-aside-width, and--kappa-resource-list-layout-gap.

When the block's wrapper is a flex item, set the wrapper'sinline-size to 100%. Inline-size containment means the block's content does not set the wrapper's width. Use container queries for resource rows and toolbar controls so they also fit narrow panels on wide screens.