open-consul/ui/packages/consul-ui/app/components/panel/README.mdx

---
type: css
---
# Panel

Very basic 'panel' card-like CSS component currently used for menu-panels.

When building components using `panel` please make use of the CSS custom
properties available to help maintain consistency within the panel.

**Very important**: Please avoid using style attributes for doing this the
below is only for illustrative purposes. Please use this CSS component as a
building block for other CSS instead.

```hbs preview-template
<figure>
  <figcaption>Panel with no padding (in dark mode)</figcaption>
  <div class={{class-map 'panel' 'theme-dark'}} ...attributes>
    <div>
      <p>Some text purposefully with no padding</p>
    </div>
    <hr />
    <div>
      <p>Along with a separator ^ again purposefully with no padding</p>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Panel using inherited padding for consistency</figcaption>
  <div class={{class-map 'panel'}} ...attributes>
    <Action
      style={{style-map
        (array 'width' '100%')
        (array 'border-bottom' '1px solid var(--tone-border)')
        (array 'padding' 'var(--padding-x) var(--padding-y)')
      }}
    >
      Full Width Button
    </Action>
    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
      <p>Some text with padding</p>
    </div>
    <hr />
    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
      <p>Along with a separator ^ again with padding</p>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Panel using larger padding and different color borders</figcaption>
  <div
    class={{class-map 'panel'}}
    style={{style-map
      (array '--padding-x' '24px')
      (array '--padding-y' '24px')
      (array '--tone-border' 'var(--token-color-consul-foreground)')
    }}
    ...attributes
  >
    <Action
      style={{style-map
        (array 'width' '100%')
        (array 'border-bottom' '1px solid var(--tone-border)')
        (array 'padding' 'var(--padding-x) var(--padding-y)')
      }}
    >
      Full Width Button
    </Action>
    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
      <p>Some text with padding</p>
    </div>
    <hr />
    <div style={{style-map (array 'padding' 'var(--padding-x) var(--padding-y)')}}>
      <p>Along with a separator ^ again with padding</p>
    </div>
  </div>
</figure>
```

```css
.panel {
  @extend %panel;
}
.panel hr {
  @extend %panel-separator;
}
```

## CSS Properties

| Property        | Type     | Default                           | Description                                                          |
| --------------- | -------- | --------------------------------- | -------------------------------------------------------------------- |
| `--tone-border` | `color`  | --token-color-palette-neutral-300 | Default color for all borders                                        |
| `--padding-x`   | `length` | 14px                              | Default x padding to be used for padding values within the component |
| `--padding-y`   | `length` | 14px                              | Default y padding to be used for padding values within the component |