---
title: "Brand assets of Bulma"
layout: default
theme: primary
route: brand
breadcrumb:
  - home
  - brand
---
{% include global/header.html %}

{%
  include docs/hero.html
  title="The Bulma brand"
  subtitle="Download the official Bulma logo."
%}

<div class="bd-brand">
  <div class="bd-logos">
    <p class="bd-logos-label title is-5">
      Icon
    </p>

    {%
      include docs/components/logos-item.html
      asset="Bulma Icon"
    %}

    {%
      include docs/components/logos-item.html
      unsplash="fxvpCFZgTe4"
      asset="Bulma Icon Black"
    %}

    {%
      include docs/components/logos-item.html
      unsplash="4TKFpJPnyU8"
      asset="Bulma Icon White"
    %}

    <p class="bd-logos-label title is-5">
      Wordmark
    </p>

    {%
      include docs/components/logos-item.html
      asset="Bulma Wordmark"
    %}

    {%
      include docs/components/logos-item.html
      unsplash="KjWMGF0PYuE"
      asset="Bulma Wordmark"
    %}

    {%
      include docs/components/logos-item.html
      unsplash="qsnfSvCdec4"
      asset="Bulma Wordmark White"
    %}

    <p class="bd-logos-label title is-5">
      Logo
    </p>

    {%
      include docs/components/logos-item.html
      asset="Bulma Logo"
    %}

    {%
      include docs/components/logos-item.html
      unsplash="8tA3ZSY9Iic"
      asset="Bulma Logo Black"
    %}

    {%
      include docs/components/logos-item.html
      unsplash="RMypptC8-B0"
      asset="Bulma Logo White"
    %}

    <p class="bd-logos-label title is-5">
      Color
    </p>

    <div class="bd-logos-color has-background-primary"></div>

    <div class="bd-logos-codes">
      <div class="bd-logos-code">
        <p>Hex</p>
        <p><strong>#00D1B2</strong></p>
        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="#00D1B2">Copy</button>
      </div>
      <div class="bd-logos-code">
        <p>RGB</p>
        <p><strong>rgb(0, 209, 178)</strong></p>
        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="rgb(0, 209, 178)">Copy</button>
      </div>
      <div class="bd-logos-code">
        <p>HSL</p>
        <p><strong>hsl(171, 100%, 41%)</strong></p>
        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="hsl(171, 100%, 41%)">Copy</button>
      </div>
    </div>
  </div>
</div>