# Overview



<m-tag variant="success">Version {version}</m-tag>

# Components

> Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
    gap: "var(--m-space-l)",
    alignItems: "flex-start",
  }}
>
  {modules
    .flatMap((module) => module.declarations)
    .filter(
      (declaration) => declaration.kind === "class" && declaration.customElement && !exclude.includes(declaration.name) 
    )
    .sort((a, b) => a.name.localeCompare(b.name))
    .map((component) => (
      <ComponentCard
        key={component.name}
        name={component.name}
        description={component.description}
      />
    ))}
</div>




<m-tag variant="success">Version {version}</m-tag>

# Layout components

> Layout components provide the structural foundation for applications by defining the HTML document outline. These components use semantic HTML elements and readable naming conventions to create accessible, well-structured layouts that developers can easily understand and implement.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
    gap: "var(--m-space-l)",
    alignItems: "flex-start",
  }}>
  {modules
    .flatMap((module) => module.declarations)
    .filter(
      (declaration) =>
        declaration.kind === "class" &&
        declaration.customElement &&
        include.includes(declaration.name) &&
        !exclude.includes(declaration.name)
    )
    .sort((a, b) => a.name.localeCompare(b.name))
    .map((component) => (
      <ComponentCard path="layout" key={component.name} name={component.name} description={component.description} />
    ))}
</div>




<m-tag variant="warning">In progress</m-tag>

# Patterns

> Design patterns help create consistent, intuitive experiences across our products. They provide proven solutions to common UX challenges, reduce cognitive load for users, and speed up both design and development by offering ready-to-use combinations of our components.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "1fr",
    gap: "var(--m-space-l)",
    alignItems: "flex-start",
  }}
>
  <ComponentCard
    variant="horizontal"
    key="ai"
    image="/empty.svg"
    name="AI Assisted job description"
    href="/?path=/docs/patterns-ai-assisted-job-descriptions--docs"
    description="From promotion to using the feature"
  />
  <ComponentCard
    variant="horizontal"
    key="ai-button"
    image="/empty.svg"
    name="AI buttons"
    href="/?path=/docs/patterns-ai-buttons--docs"
    description="One button to rule the ai"
  />
  <ComponentCard
    variant="horizontal"
    key="forms"
    image="/empty.svg"
    name="Form patterns"
    href="/?path=/docs/patterns-forms--docs"
    description="How we build forms"
  />
</div>




# Templates

> Templates are complex examples of how to use the components to create the structure of a page or view. They are used to define the HTML document outline and are used to create accessible, well-structured layouts that are easy to implement.

<m-box-link-group>
  {templates.map((component, index) => (
    <m-box-link key={index} href={`${getTemplateBaseUrl()}/${component.url}`} icon="file">
      <h3 slot="title">{component.name}</h3>
      <p slot="description">{component.description}</p>
    </m-box-link>
  ))}
</m-box-link-group>




<m-tag variant="success">Version {version}</m-tag>

# Design Tokens

> Design tokens are the foundational elements of our design system. They are used to create consistent and scalable UI components.

<div
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
    gap: "var(--m-space-l)",
    alignItems: "flex-start",
  }}
>
  {tokenGroups.map((component) => (
    <TokenCard
      key={component.name}
      name={component.name}
      description={component.description}
    />
  ))}
</div>