qds-action-panel

A launch-style panel component that groups high-emphasis actions into a responsive tile grid.

Features

• Optional title and supporting description
• Responsive action tile grid with 1-4 columns
• Per-item icon, label, target, and trailing action glyph
• Accepts either a real items array or a JSON string for attribute usage
• Compatible with QDS content renderer block configs

Basic Usage

<qds-action-panel id="panel"></qds-action-panel>

<script type="module">
  const panel = document.getElementById('panel');
  panel.config = {
    title: 'Launch resources',
    description: 'Group related destinations into one focused panel.',
    columns: 2,
    items: [
      {
        label: 'Open dashboard',
        href: '#dashboard',
        target: '_self',
        iconSrc: '',
        iconAlt: '',
        actionKind: 'forward'
      },
      {
        label: 'Download memo',
        href: '#memo',
        target: '_self',
        iconSrc: '',
        iconAlt: '',
        actionKind: 'download'
      }
    ]
  };
</script>

Attributes

Attribute	Type	Default	Description
title	String	""	Panel heading
description	String	""	Supporting copy shown below the title
columns	Number	2	Tile columns, clamped between 1 and 4
items	JSON String	[]	Array of action items when configured through HTML attributes

Action Item Shape

Each item supports the following fields:

Field	Type	Default	Description
label	String	"New action"	Tile label
href	String	"#"	Destination URL
target	String	"_self"	Link target
iconSrc	String	""	Optional icon image URL
iconAlt	String	""	Alt text for the icon image
actionKind	String	"forward"	Trailing glyph variant: forward, external, or download