Vebego Component Library

Colors 

<div class="mb-12">
    <h4 class="atm-heading ">Primairy colour</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #562082"></div>
        <div class="p-4">
            <div class="font-bold">Primary</div>
            <div>#562082</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Secondairy colours</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #990d7f"></div>
        <div class="p-4">
            <div class="font-bold">Secondary col 1</div>
            <div>#990d7f</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #282a86"></div>
        <div class="p-4">
            <div class="font-bold">Secondary col 2</div>
            <div>#282a86</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Secondairy accent colours</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #E90745"></div>
        <div class="p-4">
            <div class="font-bold">Accent 1</div>
            <div>#E90745</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #00acb6"></div>
        <div class="p-4">
            <div class="font-bold">Accent 2</div>
            <div>#00acb6</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #f69915"></div>
        <div class="p-4">
            <div class="font-bold">Accent 3</div>
            <div>#f69915</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #d5007d"></div>
        <div class="p-4">
            <div class="font-bold">Accent 4</div>
            <div>#d5007d</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Tokens - links</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #f69915"></div>
        <div class="p-4">
            <div class="font-bold">Link primary</div>
            <div>#f69915</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #282a86"></div>
        <div class="p-4">
            <div class="font-bold">Link secondary</div>
            <div>#282a86</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Tokens - text</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #000000"></div>
        <div class="p-4">
            <div class="font-bold">Titles</div>
            <div>#000000</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #525252"></div>
        <div class="p-4">
            <div class="font-bold">Body</div>
            <div>#525252</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Tokens - shades</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #FFFFFF"></div>
        <div class="p-4">
            <div class="font-bold">Shade 100</div>
            <div>#FFFFFF</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #D8D8D8"></div>
        <div class="p-4">
            <div class="font-bold">Shade 500</div>
            <div>#D8D8D8</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #1E1E1E"></div>
        <div class="p-4">
            <div class="font-bold">Shade 900</div>
            <div>#1E1E1E</div>
        </div>
    </div>
</div>
<div class="mb-12">
    <h4 class="atm-heading ">Tokens - states</h4>

    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #F04438"></div>
        <div class="p-4">
            <div class="font-bold">Error</div>
            <div>#F04438</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #FDB022"></div>
        <div class="p-4">
            <div class="font-bold">Warning</div>
            <div>#FDB022</div>
        </div>
    </div>
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 " style="background: #12B76A"></div>
        <div class="p-4">
            <div class="font-bold">Succes</div>
            <div>#12B76A</div>
        </div>
    </div>
</div>
 
{{#each colorGroup}}
<div class="mb-12">
    {{render '@heading--h4' this merge=true}}
    {{#each color}}
    <div class="inline-block mr-8 shadow-lg">
        <div class="w-40 h-40 {{#if tailwindName}}bg-{{tailwindName}}{{/if}}" {{#unless tailwindName}}style="background: {{hex}}"{{/unless}}></div>
        <div class="p-4">
            <div class="font-bold">{{friendlyName}}</div>
            <div>{{hex}}</div>
        </div>
    </div>
    {{/each}}
</div>
{{/each}}
 
{
  "colorGroup": [
    {
      "text": "Primairy colour",
      "color": [
        {
          "friendlyName": "Primary",
          "tailwindName": "",
          "hex": "#562082"
        }
      ]
    },
    {
      "text": "Secondairy colours",
      "color": [
        {
          "friendlyName": "Secondary col 1",
          "tailwindName": "",
          "hex": "#990d7f"
        },
        {
          "friendlyName": "Secondary col 2",
          "tailwindName": "",
          "hex": "#282a86"
        }
      ]
    },
    {
      "text": "Secondairy accent colours",
      "color": [
        {
          "friendlyName": "Accent 1",
          "tailwindName": "",
          "hex": "#E90745"
        },
        {
          "friendlyName": "Accent 2",
          "tailwindName": "",
          "hex": "#00acb6"
        },
        {
          "friendlyName": "Accent 3",
          "tailwindName": "",
          "hex": "#f69915"
        },
        {
          "friendlyName": "Accent 4",
          "tailwindName": "",
          "hex": "#d5007d"
        }
      ]
    },
    {
      "text": "Tokens - links",
      "color": [
        {
          "friendlyName": "Link primary",
          "tailwindName": "",
          "hex": "#f69915"
        },
        {
          "friendlyName": "Link secondary",
          "tailwindName": "",
          "hex": "#282a86"
        }
      ]
    },
    {
      "text": "Tokens - text",
      "color": [
        {
          "friendlyName": "Titles",
          "tailwindName": "",
          "hex": "#000000"
        },
        {
          "friendlyName": "Body",
          "tailwindName": "",
          "hex": "#525252"
        }
      ]
    },
    {
      "text": "Tokens - shades",
      "color": [
        {
          "friendlyName": "Shade 100",
          "tailwindName": "",
          "hex": "#FFFFFF"
        },
        {
          "friendlyName": "Shade 500",
          "tailwindName": "",
          "hex": "#D8D8D8"
        },
        {
          "friendlyName": "Shade 900",
          "tailwindName": "",
          "hex": "#1E1E1E"
        }
      ]
    },
    {
      "text": "Tokens - states",
      "color": [
        {
          "friendlyName": "Error",
          "tailwindName": "",
          "hex": "#F04438"
        },
        {
          "friendlyName": "Warning",
          "tailwindName": "",
          "hex": "#FDB022"
        },
        {
          "friendlyName": "Succes",
          "tailwindName": "",
          "hex": "#12B76A"
        }
      ]
    }
  ]
}

No notes defined.