Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Color Panel 

<div class="color-panel">
    <div class="color-panel__color -bg-primary"></div>
    <p class="color-panel__description">
        $primary
    </p>
</div>
 
<div class="color-panel">
  <div class="color-panel__color -bg-{{color}}"></div>
  <p class="color-panel__description">
    {{prefix}}{{color}}
  </p>
</div>
 
{
  "prefix": "$",
  "color": "primary"
}
  • Content: 
    /* Color Panel Helper */

.color-panel {
  @include typography-level('code');

  padding: $helper-padding;
  border: 1px solid $gray-dark;

  &,
  &__color {
    border-radius: $helper-border-radius;
  }

  &__color {
    height: 4rem;
    border: 1px solid $gray-light;
  }

  &__description {
    margin-top: $helper-padding;
    margin-bottom: 0;
  }
}
  • URL: /components/raw/helper-color-panel/_color-panel.scss
  • Filesystem Path: src/components/_example-helpers/color-panel/_color-panel.scss
  • Size: 356 Bytes

There are no notes for this item.