Logotype (in header)

Make clear to users that they are within KTH

When to use this component

Inside the header when building a full-page app.

When not to use this component

Do not use it for widgets or inside <iframe>
The image assets in this component are optimized exclusively for the KTH header. For other uses, get the logotype from the KTH graphical profile

When should or should not be a link

Most of the times, the logotype should be inside a link to either kth.se, intranet or student web.

In some cases, you should not do it. For example:

A page where users should not leave. For example: waiting for payment.
An app where users should not leave in any intermediate step. For example: account activation.

How it works

Serve the image assets in your app according to the get started guide
Place this component inside kth-header

Without link

Use this if the logotype does not include a link anywhere.

The alt attribute should include “KTH”, “KTH Royal Institute of Technology” or synonyms. Avoid using words like “logotype”, “image”.
The alt attribute should be localized

Code

<figure class="kth-header__logotype">
  <img
    alt="KTH"
    srcset="
      <ASSETS_DIRECTORY>/kth-logotype-64.webp,
      <ASSETS_DIRECTORY>/kth-logotype-64@2x.webp 2x,
      <ASSETS_DIRECTORY>/kth-logotype-64@3x.webp 3x
    "
    src="<ASSETS_DIRECTORY>/kth-logotype-64.png"
  />
</figure>

@use "@kth/style/scss/components/header.scss";

With link

Use this if the logotype does inlcude a link.

The link should go to either kth.se, intranet or student web.
The alt attribute should indicate the action of the link. For example: “Go to kth homepage”
The alt attribute should be correctly localized