Menu California Design System

Org

Display an organization's logo and name. Useful for layouts and headers.

Basic usage

California Design System 
<ca-org>
  <a href="/California-Design-System/">
    <ca-pic slot="org-img" emblem="ca.gov" aria-label="ca.gov"></ca-pic>
    <span slot="org-cal">California</span>
    <span slot="org-dept">Design System</span>
  </a>
</ca-org>

Without the link

If you don't want to link the org to a page, you can remove the <a> element. Still works.

California Design System 
<ca-org>
  <ca-pic slot="org-img" emblem="ca.gov" aria-label="ca.gov"></ca-pic>
  <span slot="org-cal">California</span>
  <span slot="org-dept">Design System</span>
</ca-org>

Horizontal version

There's also a horizontal version. Use the format="horizontal" attribute.

California Design System 
<ca-org format="horizontal">
  <ca-pic slot="org-img" emblem="ca.gov" aria-label="ca.gov"></ca-pic>
  <span slot="org-cal">California</span>
  <span slot="org-dept">Design System</span>
</ca-org>