lims-frontent/tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`BrandButtons.vue renders correctly 1`] = `
<div
  class="row"
>
  <div
    class="col-12"
  >
    <div
      class="card"
    >
      <header
        class="card-header"
      >
        <strong>
          Brand Button
        </strong>
         
        <div
          class="card-header-actions"
        >
          <a
            class="card-header-action"
            href="https://coreui.io/vue/docs/components/button-components"
            rel="noreferrer noopener"
            target="_blank"
          >
            <small
              class="text-muted"
            >
              docs
            </small>
          </a>
        </div>
      </header>
       
      <div
        class="card-body"
      >
        <small>
          Usage 
        </small>
         
        <code>
          &lt;CButton color="facebook"&gt;&lt;CIcon name="cib-facebook"/&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
        </code>
         
        <hr />
         
        <h6>
          
          Size Small
          
          <small>
            Add 
            <code>
              size="sm"
            </code>
          </small>
        </h6>
         
        <p>
          <button
            class="btn btn-brand btn-facebook btn-sm"
            name="facebook"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              facebook
            </span>
          </button>
          <button
            class="btn btn-brand btn-twitter btn-sm"
            name="twitter"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              twitter
            </span>
          </button>
          <button
            class="btn btn-brand btn-linkedin btn-sm"
            name="linkedin"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              linkedin
            </span>
          </button>
          <button
            class="btn btn-brand btn-flickr btn-sm"
            name="flickr"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              flickr
            </span>
          </button>
          <button
            class="btn btn-brand btn-tumblr btn-sm"
            name="tumblr"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              tumblr
            </span>
          </button>
          <button
            class="btn btn-brand btn-xing btn-sm"
            name="xing"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              xing
            </span>
          </button>
          <button
            class="btn btn-brand btn-github btn-sm"
            name="github"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              github
            </span>
          </button>
          <button
            class="btn btn-brand btn-stackoverflow btn-sm"
            name="stackoverflow"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              stackoverflow
            </span>
          </button>
          <button
            class="btn btn-brand btn-youtube btn-sm"
            name="youtube"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              youtube
            </span>
          </button>
          <button
            class="btn btn-brand btn-dribbble btn-sm"
            name="dribbble"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              dribbble
            </span>
          </button>
          <button
            class="btn btn-brand btn-instagram btn-sm"
            name="instagram"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              instagram
            </span>
          </button>
          <button
            class="btn btn-brand btn-pinterest btn-sm"
            name="pinterest"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              pinterest
            </span>
          </button>
          <button
            class="btn btn-brand btn-vk btn-sm"
            name="vk"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              vk
            </span>
          </button>
          <button
            class="btn btn-brand btn-yahoo btn-sm"
            name="yahoo"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              yahoo
            </span>
          </button>
          <button
            class="btn btn-brand btn-behance btn-sm"
            name="behance"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              behance
            </span>
          </button>
          <button
            class="btn btn-brand btn-reddit btn-sm"
            name="reddit"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              reddit
            </span>
          </button>
          <button
            class="btn btn-brand btn-vimeo btn-sm"
            name="vimeo"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              vimeo
            </span>
          </button>
        </p>
         
        <h6>
          Size Normal
        </h6>
         
        <p>
          <button
            class="btn btn-brand btn-facebook"
            name="facebook"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              facebook
            </span>
          </button>
          <button
            class="btn btn-brand btn-twitter"
            name="twitter"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              twitter
            </span>
          </button>
          <button
            class="btn btn-brand btn-linkedin"
            name="linkedin"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              linkedin
            </span>
          </button>
          <button
            class="btn btn-brand btn-flickr"
            name="flickr"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              flickr
            </span>
          </button>
          <button
            class="btn btn-brand btn-tumblr"
            name="tumblr"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              tumblr
            </span>
          </button>
          <button
            class="btn btn-brand btn-xing"
            name="xing"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              xing
            </span>
          </button>
          <button
            class="btn btn-brand btn-github"
            name="github"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              github
            </span>
          </button>
          <button
            class="btn btn-brand btn-stackoverflow"
            name="stackoverflow"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              stackoverflow
            </span>
          </button>
          <button
            class="btn btn-brand btn-youtube"
            name="youtube"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              youtube
            </span>
          </button>
          <button
            class="btn btn-brand btn-dribbble"
            name="dribbble"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              dribbble
            </span>
          </button>
          <button
            class="btn btn-brand btn-instagram"
            name="instagram"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              instagram
            </span>
          </button>
          <button
            class="btn btn-brand btn-pinterest"
            name="pinterest"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              pinterest
            </span>
          </button>
          <button
            class="btn btn-brand btn-vk"
            name="vk"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              vk
            </span>
          </button>
          <button
            class="btn btn-brand btn-yahoo"
            name="yahoo"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              yahoo
            </span>
          </button>
          <button
            class="btn btn-brand btn-behance"
            name="behance"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              behance
            </span>
          </button>
          <button
            class="btn btn-brand btn-reddit"
            name="reddit"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              reddit
            </span>
          </button>
          <button
            class="btn btn-brand btn-vimeo"
            name="vimeo"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              vimeo
            </span>
          </button>
        </p>
         
        <h6>
          Size Large 
          <small>
            Add 
            <code>
              size="lg"
            </code>
          </small>
        </h6>
         
        <p>
          <button
            class="btn btn-brand btn-facebook btn-lg"
            name="facebook"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              facebook
            </span>
          </button>
          <button
            class="btn btn-brand btn-twitter btn-lg"
            name="twitter"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              twitter
            </span>
          </button>
          <button
            class="btn btn-brand btn-linkedin btn-lg"
            name="linkedin"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              linkedin
            </span>
          </button>
          <button
            class="btn btn-brand btn-flickr btn-lg"
            name="flickr"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              flickr
            </span>
          </button>
          <button
            class="btn btn-brand btn-tumblr btn-lg"
            name="tumblr"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              tumblr
            </span>
          </button>
          <button
            class="btn btn-brand btn-xing btn-lg"
            name="xing"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              xing
            </span>
          </button>
          <button
            class="btn btn-brand btn-github btn-lg"
            name="github"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              github
            </span>
          </button>
          <button
            class="btn btn-brand btn-stackoverflow btn-lg"
            name="stackoverflow"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              stackoverflow
            </span>
          </button>
          <button
            class="btn btn-brand btn-youtube btn-lg"
            name="youtube"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              youtube
            </span>
          </button>
          <button
            class="btn btn-brand btn-dribbble btn-lg"
            name="dribbble"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              dribbble
            </span>
          </button>
          <button
            class="btn btn-brand btn-instagram btn-lg"
            name="instagram"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              instagram
            </span>
          </button>
          <button
            class="btn btn-brand btn-pinterest btn-lg"
            name="pinterest"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              pinterest
            </span>
          </button>
          <button
            class="btn btn-brand btn-vk btn-lg"
            name="vk"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              vk
            </span>
          </button>
          <button
            class="btn btn-brand btn-yahoo btn-lg"
            name="yahoo"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              yahoo
            </span>
          </button>
          <button
            class="btn btn-brand btn-behance btn-lg"
            name="behance"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              behance
            </span>
          </button>
          <button
            class="btn btn-brand btn-reddit btn-lg"
            name="reddit"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              reddit
            </span>
          </button>
          <button
            class="btn btn-brand btn-vimeo btn-lg"
            name="vimeo"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
             
            <span>
              vimeo
            </span>
          </button>
        </p>
      </div>
    </div>
  </div>
   
  <div
    class="col-12"
  >
    <div
      class="card"
    >
      <header
        class="card-header"
      >
        <strong>
          Brand Button 
        </strong>
         
        <small>
          Icons only
        </small>
      </header>
       
      <div
        class="card-body"
      >
        <small>
          Usage 
        </small>
         
        <code>
          &lt;CButton color="facebook"&gt;&lt;CIcon name="cib-facebook"/&gt;&lt;/CButton&gt;
        </code>
         
        <hr />
         
        <h6>
          Size Small 
          <small>
            Add 
            <code>
              size="sm"
            </code>
          </small>
        </h6>
         
        <p>
          <button
            class="btn btn-facebook btn-sm"
            name="facebook"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-twitter btn-sm"
            name="twitter"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-linkedin btn-sm"
            name="linkedin"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-flickr btn-sm"
            name="flickr"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-tumblr btn-sm"
            name="tumblr"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-xing btn-sm"
            name="xing"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-github btn-sm"
            name="github"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-stackoverflow btn-sm"
            name="stackoverflow"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-youtube btn-sm"
            name="youtube"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-dribbble btn-sm"
            name="dribbble"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-instagram btn-sm"
            name="instagram"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-pinterest btn-sm"
            name="pinterest"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-vk btn-sm"
            name="vk"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-yahoo btn-sm"
            name="yahoo"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-behance btn-sm"
            name="behance"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-reddit btn-sm"
            name="reddit"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-vimeo btn-sm"
            name="vimeo"
            type="button"
          >
            <svg
              class="c-icon c-icon-sm"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
        </p>
         
        <h6>
          Size Normal
        </h6>
         
        <p>
          <button
            class="btn btn-facebook"
            name="facebook"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-twitter"
            name="twitter"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-linkedin"
            name="linkedin"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-flickr"
            name="flickr"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-tumblr"
            name="tumblr"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-xing"
            name="xing"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-github"
            name="github"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-stackoverflow"
            name="stackoverflow"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-youtube"
            name="youtube"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-dribbble"
            name="dribbble"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-instagram"
            name="instagram"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-pinterest"
            name="pinterest"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-vk"
            name="vk"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-yahoo"
            name="yahoo"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-behance"
            name="behance"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-reddit"
            name="reddit"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-vimeo"
            name="vimeo"
            type="button"
          >
            <svg
              class="c-icon"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
        </p>
         
        <h6>
          Size Large 
          <small>
            Add 
            <code>
              size="lg"
            </code>
          </small>
        </h6>
         
        <p>
          <button
            class="btn btn-facebook btn-lg"
            name="facebook"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-twitter btn-lg"
            name="twitter"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-linkedin btn-lg"
            name="linkedin"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-flickr btn-lg"
            name="flickr"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-tumblr btn-lg"
            name="tumblr"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-xing btn-lg"
            name="xing"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-github btn-lg"
            name="github"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-stackoverflow btn-lg"
            name="stackoverflow"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-youtube btn-lg"
            name="youtube"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-dribbble btn-lg"
            name="dribbble"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-instagram btn-lg"
            name="instagram"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-pinterest btn-lg"
            name="pinterest"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-vk btn-lg"
            name="vk"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-yahoo btn-lg"
            name="yahoo"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-behance btn-lg"
            name="behance"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-reddit btn-lg"
            name="reddit"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
          <button
            class="btn btn-vimeo btn-lg"
            name="vimeo"
            type="button"
          >
            <svg
              class="c-icon c-icon-lg"
              role="img"
              viewBox="0 0 64 64"
              xmlns="http://www.w3.org/2000/svg"
            >
              undefined
            </svg>
          </button>
        </p>
      </div>
    </div>
  </div>
   
  <div
    class="col-12"
  >
    <div
      class="card"
    >
      <header
        class="card-header"
      >
        <strong>
          Brand Button 
        </strong>
         
        <small>
          Text only
        </small>
      </header>
       
      <div
        class="card-body"
      >
        <small>
          Usage 
        </small>
         
        <code>
          
          &lt;CButton color="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
        
        </code>
         
        <hr />
         
        <h6>
          Size Small 
          <small>
            Add 
            <code>
              size="sm"
            </code>
          </small>
        </h6>
         
        <p>
          <button
            class="btn btn-facebook btn-sm"
            type="button"
          >
            <span>
              facebook
            </span>
          </button>
          <button
            class="btn btn-twitter btn-sm"
            type="button"
          >
            <span>
              twitter
            </span>
          </button>
          <button
            class="btn btn-linkedin btn-sm"
            type="button"
          >
            <span>
              linkedin
            </span>
          </button>
          <button
            class="btn btn-flickr btn-sm"
            type="button"
          >
            <span>
              flickr
            </span>
          </button>
          <button
            class="btn btn-tumblr btn-sm"
            type="button"
          >
            <span>
              tumblr
            </span>
          </button>
          <button
            class="btn btn-xing btn-sm"
            type="button"
          >
            <span>
              xing
            </span>
          </button>
          <button
            class="btn btn-github btn-sm"
            type="button"
          >
            <span>
              github
            </span>
          </button>
          <button
            class="btn btn-stackoverflow btn-sm"
            type="button"
          >
            <span>
              stackoverflow
            </span>
          </button>
          <button
            class="btn btn-youtube btn-sm"
            type="button"
          >
            <span>
              youtube
            </span>
          </button>
          <button
            class="btn btn-dribbble btn-sm"
            type="button"
          >
            <span>
              dribbble
            </span>
          </button>
          <button
            class="btn btn-instagram btn-sm"
            type="button"
          >
            <span>
              instagram
            </span>
          </button>
          <button
            class="btn btn-pinterest btn-sm"
            type="button"
          >
            <span>
              pinterest
            </span>
          </button>
          <button
            class="btn btn-vk btn-sm"
            type="button"
          >
            <span>
              vk
            </span>
          </button>
          <button
            class="btn btn-yahoo btn-sm"
            type="button"
          >
            <span>
              yahoo
            </span>
          </button>
          <button
            class="btn btn-behance btn-sm"
            type="button"
          >
            <span>
              behance
            </span>
          </button>
          <button
            class="btn btn-reddit btn-sm"
            type="button"
          >
            <span>
              reddit
            </span>
          </button>
          <button
            class="btn btn-vimeo btn-sm"
            type="button"
          >
            <span>
              vimeo
            </span>
          </button>
        </p>
         
        <h6>
          Size Normal
        </h6>
         
        <p>
          <button
            class="btn btn-facebook"
            type="button"
          >
            <span>
              facebook
            </span>
          </button>
          <button
            class="btn btn-twitter"
            type="button"
          >
            <span>
              twitter
            </span>
          </button>
          <button
            class="btn btn-linkedin"
            type="button"
          >
            <span>
              linkedin
            </span>
          </button>
          <button
            class="btn btn-flickr"
            type="button"
          >
            <span>
              flickr
            </span>
          </button>
          <button
            class="btn btn-tumblr"
            type="button"
          >
            <span>
              tumblr
            </span>
          </button>
          <button
            class="btn btn-xing"
            type="button"
          >
            <span>
              xing
            </span>
          </button>
          <button
            class="btn btn-github"
            type="button"
          >
            <span>
              github
            </span>
          </button>
          <button
            class="btn btn-stackoverflow"
            type="button"
          >
            <span>
              stackoverflow
            </span>
          </button>
          <button
            class="btn btn-youtube"
            type="button"
          >
            <span>
              youtube
            </span>
          </button>
          <button
            class="btn btn-dribbble"
            type="button"
          >
            <span>
              dribbble
            </span>
          </button>
          <button
            class="btn btn-instagram"
            type="button"
          >
            <span>
              instagram
            </span>
          </button>
          <button
            class="btn btn-pinterest"
            type="button"
          >
            <span>
              pinterest
            </span>
          </button>
          <button
            class="btn btn-vk"
            type="button"
          >
            <span>
              vk
            </span>
          </button>
          <button
            class="btn btn-yahoo"
            type="button"
          >
            <span>
              yahoo
            </span>
          </button>
          <button
            class="btn btn-behance"
            type="button"
          >
            <span>
              behance
            </span>
          </button>
          <button
            class="btn btn-reddit"
            type="button"
          >
            <span>
              reddit
            </span>
          </button>
          <button
            class="btn btn-vimeo"
            type="button"
          >
            <span>
              vimeo
            </span>
          </button>
        </p>
         
        <h6>
          Size Large 
          <small>
            Add 
            <code>
              size="lg"
            </code>
          </small>
        </h6>
         
        <p>
          <button
            class="btn btn-facebook btn-lg"
            type="button"
          >
            <span>
              facebook
            </span>
          </button>
          <button
            class="btn btn-twitter btn-lg"
            type="button"
          >
            <span>
              twitter
            </span>
          </button>
          <button
            class="btn btn-linkedin btn-lg"
            type="button"
          >
            <span>
              linkedin
            </span>
          </button>
          <button
            class="btn btn-flickr btn-lg"
            type="button"
          >
            <span>
              flickr
            </span>
          </button>
          <button
            class="btn btn-tumblr btn-lg"
            type="button"
          >
            <span>
              tumblr
            </span>
          </button>
          <button
            class="btn btn-xing btn-lg"
            type="button"
          >
            <span>
              xing
            </span>
          </button>
          <button
            class="btn btn-github btn-lg"
            type="button"
          >
            <span>
              github
            </span>
          </button>
          <button
            class="btn btn-stackoverflow btn-lg"
            type="button"
          >
            <span>
              stackoverflow
            </span>
          </button>
          <button
            class="btn btn-youtube btn-lg"
            type="button"
          >
            <span>
              youtube
            </span>
          </button>
          <button
            class="btn btn-dribbble btn-lg"
            type="button"
          >
            <span>
              dribbble
            </span>
          </button>
          <button
            class="btn btn-instagram btn-lg"
            type="button"
          >
            <span>
              instagram
            </span>
          </button>
          <button
            class="btn btn-pinterest btn-lg"
            type="button"
          >
            <span>
              pinterest
            </span>
          </button>
          <button
            class="btn btn-vk btn-lg"
            type="button"
          >
            <span>
              vk
            </span>
          </button>
          <button
            class="btn btn-yahoo btn-lg"
            type="button"
          >
            <span>
              yahoo
            </span>
          </button>
          <button
            class="btn btn-behance btn-lg"
            type="button"
          >
            <span>
              behance
            </span>
          </button>
          <button
            class="btn btn-reddit btn-lg"
            type="button"
          >
            <span>
              reddit
            </span>
          </button>
          <button
            class="btn btn-vimeo btn-lg"
            type="button"
          >
            <span>
              vimeo
            </span>
          </button>
        </p>
      </div>
    </div>
  </div>
</div>
`;