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

<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