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

Color Palette 

<div class="color-palette">
    <div class="color-palette__list">
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-black"></div>
                <p class="color-panel__description">
                    black
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-gray"></div>
                <p class="color-panel__description">
                    gray
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-white"></div>
                <p class="color-panel__description">
                    white
                </p>
            </div>

        </div>
    </div>
</div>
 
<div class="color-palette">
  <div class="color-palette__list">
    {{#each colors}}
      <div class="color-palette__item">
        {{render '@helper-color-panel' this}}
      </div>
    {{/each}}
  </div>
</div>
 
{
  "colors": [
    {
      "color": "black"
    },
    {
      "color": "gray"
    },
    {
      "color": "white"
    }
  ]
}
  • Content: 
    /* Color Palette Helper */

.color-palette {
  margin-bottom: $base-margin;

  &__list {
    display: flex;
    flex-flow: row wrap;
  }

  &__item {
    flex: 1 0 20rem;
    margin: $helper-margin;
  }
}
  • URL: /components/raw/helper-color-palette/_color-palette.scss
  • Filesystem Path: src/components/_example-helpers/color-palette/_color-palette.scss
  • Size: 205 Bytes

There are no notes for this item.