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

Gray 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-gray-darker"></div>
                <p class="color-panel__description">
                    $gray-darker
                </p>
            </div>

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

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

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

        </div>
    </div>
</div>
 
{{render '@helper-color-palette' _self.context}}
 
{
  "colors": [
    {
      "prefix": "$",
      "color": "gray-darker"
    },
    {
      "prefix": "$",
      "color": "gray-dark"
    },
    {
      "prefix": "$",
      "color": "gray-light"
    },
    {
      "prefix": "$",
      "color": "gray-lighter"
    }
  ]
}

There are no notes for this item.