Go to main content
Go to KTH Intranet

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

Multi-site logotype

No CSS is used to dynamically render the logo.

  • Use single img tag in template.
  • The header component should display only one logo based on its theme class (.external, student-web or intranet). This rendering should be dynamic and is typically managed within a controller or similar backend logic.
  • To achieve conditional rendering of the logotype you can use the npm package [KTH-node-web-common] (https://github.com/KTH/kth-node-web-common/blob/main/README.md) (helper “conditionalLogotypeSrc” ) or similar logic.
Code 
<figure>
  <img
    class="blue"
    alt="{alt}"
    srcset="
      /style/assets/kth-logotype-blue.webp,
      /style/assets/kth-logotype-blue@2x.webp 2x,
      /style/assets/kth-logotype-blue@3x.webp 3x
    "
    src="/<ASSETS_DIRECTORY>/logotype/{src}" [Note: Dynamically render logotype-blue.svg&#47;logotype-white.svg] />
</figure>

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

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-logotype">
  <img
    class="blue"
    alt="{alt}"
    width="64"
    height="64"
    src="/<ASSETS_DIRECTORY>/logotype/{src}" [Note: Dynamically render logotype-blue.svg&#47;logotype-white.svg]
  />
</figure>

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

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
Code 
<a href="/" class="kth-logotype">
  <figure>
    <img
      alt="{alt}"
      width="64"
      height="64"
      src="/<ASSETS_DIRECTORY>/logotype/{src}" [Note: Dynamically render logotype-blue.svg&#47;logotype-white.svg]
    />
  </figure>
</a>

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

Read more