Header Component

General Information

  • Header figures are generated through a svelte HeaderFigure component, which can be imported by including the following line in the file's script tag:
    import HeaderFigure from '$lib/components/HeaderFigure.svelte';
  • The header figures of several pages have common components and layouts, and as such, a component has been created that attempts to render said figures in a consistent and structured manner. Internally, the configuration of the figure is defined through nested objects that specify every detail of the element.
  • Four presets have been made for the component, each of them named after the page they are used on, namely home, it, over-ons and multimedia. The overall layout an styling of these presets are preconfigured for ease of use. Alternatively, a custom configuration can be passed on to the component. The meaning of each property contained in these objects will be dicussed in a separate section.
  • The HeaderFigure component has a single parameter through which the figure can be configured.
    1. config: The configuration of the figure, which is either an object specifying the figure's specifics or a string containing the name of one of the presets listed above.
  • The HeaderFigure component has strict requirements upon the number of columns it spans in its parent's grid—the figure needs a constant width of 16 columns, which are assumed to be var(--half-block) sized. On top of that, the component needs to span 32 columns in the mobile layout.

Examples

The four available header figures are listed below.

Home

“Autisme is voor mij
geen beperking,
maar een kracht”

een foto van een scholier
<HeaderFigure config={"home"} />

IT

+500

Geslaagde

projecten

<HeaderFigure config={"it"} />

Over Ons

een groepsfoto van alle medewerkers bij spectrum multimedia & it
<HeaderFigure config={"over-ons"} />

Multimedia

+500

Gemaakte

designs

<HeaderFigure config={"multimedia"} />

Custom Configuration

The sub-components of the header figure can be configured at a high level of detail. The default values within the configuration correspond to those used by the home preset. The options are as follows:

  • The overarching configuration of the figure can be specified using the following interface. As such, this should be the top-level object that is passed on to the component in the config parameter. interface HeaderFigureConfiguration {
      includeBrain: boolean;
      backgroundColor?: string;
      string?: StringConfiguration;
      bubble?: BubbleConfiguration;
      image: ImageConfiguration;
      decal?: "it" | "multimedia";
    }
     The options are specified as follows:
    1. includeBrain: A boolean that signifies whether the figure should have the brain symbol.
    2. backgroundColor: An optional background color for the figure.
    3. string: An optional configuration for the string decal used in the figure's background.
    4. bubble: An optional configuration for the figure's text bubble.
    5. image: A mandatory configuration for the figure's image.
    6. decal: An optional name of the icon to be included (either it or multimedia).
  • The figure's image can be configured through the following interface. interface ImageConfiguration {
      path: string;
      alt: string;
      container?: {
        left?: string;
        top?: string;
        right?: string;
        bottom?: string;
      };
      left?: string;
      top?: string;
      width?: string;
      mask?: boolean;
    }
     The options are specified as follows:
    1. path: The path that is to be used as the image's source.
    2. alt: An alternative text to be shown if the image cannot be loaded.
    3. container: An optional list of offsets to be applied to the borders of the image's container.
    4. left: An optional css-value specifying the spacing to be applied to the left of the image.
    5. top: An optional css-value specifying the spacing to be applied to the top of the image.
    6. width: An optional css-value specifying the width of the image.
    7. mask: An optional boolean flag that specifies whether the image requires a mask to cover the rounded corner in the bottom left corner.
  • The text bubble used within the figure can be specified as follows. interface BubbleConfiguration {
      snippet: Snippet;
      backgroundColor?: string;
      color?: string;
      width?: string;
      height?: string;
      left?: string;
      top?: string;
      zIndex?: number;
    }
     The options are specified as follows:
    1. snippet: A snippet that renders the contents of the figure's chat bubble.
    2. backgroundColor: An optional css-value that contains the desired background color.
    3. color: An optional css-value that specifies the text color to be used within the bubble.
    4. width: An optional css-value that provides the width of the text bubble.
    5. height: An optional css-value that provides the height of the text bubble.
    6. left: An optional css-value that defines the distance between the left side of the text bubble and the encompassing figure.
    7. top: An optional css-value that defines the distance between the top edge of the text bubble and the encompassing figure.
    8. zIndex: An optional z-index for the figure's text bubble.
  • Lastly, an interface is provided through which the background string decoration can be configured. interface StringConfiguration {
      respectCutout: boolean;
      isLightblue: boolean;
      left?: string;
      top?: string;
      backgroundSize?: string;
      transform?: string;
      mask?: boolean;
    }
     The options are specified as follows:
    1. respectCutout: Whether the decal string is allowed to go outside of the background's cutouts.
    2. isLightblue: A boolean that tells that the background should be lightblue instead of darkblue.
    3. left: An optional css-value that defines the left css property to be used to place the string.
    4. top: An optional css-value that defines the top css property to be used to place the string.
    5. backgroundSize: An optional css-value holding a mask-size/background-size css property value to be applied to the string background decal.
    6. transform: An optional css-value taht contains the transform to be applied to the decal.
    7. mask: Whether to include a mask in the bottom-left corner that hides the part of the string located under the figure's image.