Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Colors 

<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 class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-active-red"></div>
                <p class="color-panel__description">
                    $active-red
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-dynamic-green"></div>
                <p class="color-panel__description">
                    $dynamic-green
                </p>
            </div>

        </div>
    </div>
</div>
 
{{render '@helper-color-palette' _self.context}}
 
{
  "colors": [
    {
      "prefix": "$",
      "color": "black"
    },
    {
      "prefix": "$",
      "color": "gray"
    },
    {
      "prefix": "$",
      "color": "white"
    },
    {
      "prefix": "$",
      "color": "active-red"
    },
    {
      "prefix": "$",
      "color": "dynamic-green"
    }
  ]
}

There are no notes for this item.