Hero Image

Documentation

Related

Related is used to showcase components that are similar to the component.

The Related component is build upon a Grid and uses AnimateInView in order to animate the images.

You set the components that you want to be in Related in the _meta.mjs file, wich will generate Related. These should be importing the meta from the the mdx file of the component that you want to have inside of Related.

We keep the amount of items in the related array to a maximum of 3, in order to be visually appealing.

This is what the Related tag looks like for the button.

Related image

Code examples

This is an example of the implementation from /components/button


import heroImg from '/public/images/components/components-hero.png';
import componentImg from '/public/images/components/meta/button.png';

// import the paths to the components that are used in the related
import { meta as patterns } from '/pages/patterns/index.mdx';
import { meta as buttonGroup } from '/pages/components/button-group/index.mdx';
import { meta as gettingStarted } from '/pages/way-of-thinking/tone-and-voice.mdx';

const baseUrl = '/components/button';
export const meta = {
  baseUrl,
  tabs: [
    {
      label: 'Usage',
      path: '/components/button'
    },
    {
      label: 'Code',
      path: `${baseUrl}/code`
    }
  ],  
  // Add the items to the related array
  related: [
    patterns,
    buttonGroup,
    gettingStarted
  ],
  hero: {
    image: heroImg,
    title: 'Button',
    subTitle: 'Components'
  },
  visibleAnchor: ['h2'],
  docs: {
    a11y: true,
    ux: true,
    dev: true,
    status: 'Ready'
  },
  image: componentImg
};