Logos

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Logotipos y marcas institucionales. Usa el bloque BEM .cl-logo del Kit Digital.

Horizontal

<a class="cl-logo cl-logo--header-horizontal" href="#" aria-label="Ir al inicio">
  <img class="cl-logo__image" src="/logos/logo-horizontal.svg" alt="" aria-hidden="true" />
  <span class="cl-logo__text">
    <span class="cl-logo__name">Demoweb</span><span class="cl-logo__domain">.Gob.cl</span>
  </span>
</a>

Vertical small

<a class="cl-logo cl-logo--header-vertical-sm" href="#" aria-label="Ir al inicio">
  <span class="cl-brand-stripe" aria-hidden="true">
    <span class="cl-brand-stripe__bar cl-brand-stripe__bar--brand"></span>
    <span class="cl-brand-stripe__bar cl-brand-stripe__bar--accent"></span>
  </span>
  <span class="cl-logo__text">
    <span class="cl-logo__name">Demoweb</span><span class="cl-logo__domain">.Gob.cl</span>
  </span>
</a>

Vertical large

<a class="cl-logo cl-logo--header-vertical-lg" href="#" aria-label="Ir al inicio">
  <span class="cl-brand-stripe" aria-hidden="true">
    <span class="cl-brand-stripe__bar cl-brand-stripe__bar--brand"></span>
    <span class="cl-brand-stripe__bar cl-brand-stripe__bar--accent"></span>
  </span>
  <span class="cl-logo__text">
    <span class="cl-logo__name">Demoweb</span><span class="cl-logo__domain">.Gob.cl</span>
  </span>
</a>