No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Metadata

Metadata is used to communicate additional information about your website to webbrowser, accessible devices or other applications.

The meta-tag has attributes for some general page settings but can also be used to define other metadata using specific names. On this page you will find links to other pages that explain some of those names and what they can be used for.

<meta charset="utf-8" />
<title>Metadata example</title>
<meta name="author" content="DesignSystem" />
<meta name="keywords" content="metadata, example" />
<meta name="description" content="An Examle of how metadata of a webpage could look like." />

This meta-tag can be used to manipulate the size and shape of the viewport. See MDN’s guide on the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Some meta-tags influence how search engines (especially Google) treat a website. For more details, see Google Search documentation on special tags.

<meta name="robots" content="noarchive, nofollow" />

Open Graph Tags are used to provide a more detailed description as well as a preview image about the content of a page. This informations can be used to display links in a more appealing way, when they are shared on platforms like X (formerly Twitter), Facebook, Microsoft Teams and many more... X introduced custom meta-tags to specify special elements like card, etc., although there is also some support for open graph tags. To use open grah tags you should put prefix="og: http://ogp.me/ns#" as attribute to either the html or the head tag, neither option is better than the other.

<head prefix="og: https://ogp.me/ns#">
    <meta property="og:title" content="Metadata Example" />
    <meta property="og:url" content="https://www.example.com" />
    <meta property="og:image" content="https://www.ex.com/images/rock.jpg" />
</head>

The favicon is the little icon that is displayed on tabs in web browsers. You can see it as the program icon of a website.
Learn how to manage favicons effectively in the Favicon Management Guide on dev.to.

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

There is the possibility to provide a specific page in different languages using metadata. The page specififed with hreflang="x-default" is the page that will match for any language that is not specified in any hreflang attribute on this page. Please note that the current page and its language alternatives must be listed on each of this pages.For guidance, see Google’s documentation on localized versions.

<link rel="alternate" hreflang="en" href="https://en.example.com/page.html" />
<link rel="alternate" hreflang="de" href="https://de-ch.example.com/page.html" />
<link rel="alternate" hreflang="fr" href="https://fr.example.com/page.html" />
<link rel="alternate" hreflang="it" href="https://it.example.com/page.html" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />

Content Security Policy

Instead of using the HTTP header the Content Security Policy can also be definend in a meta-tag in HTML. In that case it must be the first meta-tag in the header.

<meta http-equiv="Content-Security-Poilicy" content="default-src self;" />

This is how metadata of a webpage called "Metadata Example" could look like.

<!DOCTYPE html>
<html lang="en">
    <head prefix="og: https://ogp.me/ns#">
        <meta charset="utf-8" />
        <title>Metadata example</title>
        <meta name="author" content="DesignSystem" />
        <meta name="keywords" content="metadata, example" />
        <meta name="description" content="An Examle of how metadata of a webpage could look like." />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="robots" content="noarchive, nofollow" />
        <meta property="og:title" content="Metadata Example" />
        <meta property="og:url" content="https://www.example.com" />
        <meta property="og:image" content="https://www.ex.com/images/rock.jpg" />
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <link rel="alternate" hreflang="en" href="https://en.example.com/page.html" />
        <link rel="alternate" hreflang="de" href="https://de-ch.example.com/page.html" />
        <link rel="alternate" hreflang="fr" href="https://fr.example.com/page.html" />
        <link rel="alternate" hreflang="it" href="https://it.example.com/page.html" />
        <link rel="alternate" hreflang="x-default" href="https://www.example.com/" />
        <meta http-equiv="Content-Security-Poilicy" content="default-src self;" />
    </head>
</html>