# Branding
> All Volue products must be designed to follow the volue look and feel as given by the vera design system components, tokens and patterns. In particular the volue logo can be considered as the major branding element.

There is one major placement for the volue logo: on the top of the application serving as its headline.

## Logo inside the header

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use whenever a layout with header is in use.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The volue logo is positioned on the very left of the header as the white
      logo variant.
      <br />
      Often the logo is combined with the product name on the right of it.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The logo can also serve as a link to the starting screen of the
      application.
      <br />
      It should always be visible. For small screens it may be reduced to its
      icon variant.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/layout/logo">Logo</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Logo inside the sidebar

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use whenever a layout with only a sidebar is in use.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The volue logo is shown in its icon variant. It is positioned on the very
      left of the header of the sidebar as the white logo variant.
      <br />
      Often the logo is combined with the product name on the right of it.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The logo can also serve as a link to the starting screen of the
      application.
      <br />
      It should always be visible. For small screens it may be reduced to its
      icon variant.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/layout/logo">Logo</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

### Logo inside the collapsed sidebar

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      On the collapsed sidebar or on any other occasion where the space is very
      limited: the icon variant of the logo may be shown.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The volue logo is shown in its icon variant. It is positioned on the very
      left of the header of the sidebar as the white logo variant.
      <br />
      Often the logo is combined with the product name on the right of it.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The logo can also serve as a link to the starting screen of the
      application.
      <br />
      It should always be visible. For small screens it may be reduced to its
      icon variant.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/layout/logo">Logo</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Logo as placeholder

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The logo can also be used to visualize the originator of the application.
      This can be done to welcome the user at the very start. It can also be
      used as placeholder pages.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The volue logo is shown in its accent color variant. It is positioned on
      the center of the page and serves as a heading for a text block.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Welcome pages and placeholder pages are often shown as long as there is no
      content yet. As soon as content exists these pages are not necessary.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/layout/logo">Logo</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>