(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Patterns Template

This page will give a systematic guide on the structure and required content of pages in this Wiki. Furthermore, it will outline rules on the formatting of text and images.

Structure

Overview

Provide one to three short paragraphs that explain:

• The primary use cases.
• The pattern’s role in the Inspire Design ecosystem.
• Core capabilities or behaviors.

In addition to the bullet points, the overview includes a picture showing one examplary implementation of the pattern. If different types of the pattern exist, the overview should include a table with thes types, their use case and a short description.

Anatomy

This section is image first. It includes one or more anotated images of the pattern. They should visualy showcase the structure in combination with alegend. The legend includes the propper name for the structural elements and a short description for each.

Best Practices/ Guidelines

This section explains when and how to use the pattern. It should be short and scannable, jet include the most important aspects pertaining to usage. The Guidelines described here should pertain to the pattern in general, not a specific implementation of the pattern inside a specific context. If possible, the information should always be accompanied by images.

• Dos and Don'ts: This optional sub-section of Best Practices forms a comparison between right and wrong implementations of the pattern.
• Accessibility: The Accessibility sub-section focuses on ways the pattern ensures accessibility. In addition, it can also explain, how the pattern has to be impleented to ensure accessibility. This section is currently optional.

[Pattern specific pages]

This is a subset of section focues on any number of features and pattern manifestations that the pattern has. Examples include:

• Types: Any number of sub-sections explaining the manifestation of the pattern inside specific contexts and components.
• Hierarchy: Explaining the information hierarchy inside the pattern or how the pattern fits into the hierarchy of anny given context.
• Implementation: A step-by-step explanation on how to build the pattern inside the app composer.
• Features: Important aspects of the features in more detail than is possible inside the Anatomy section.

These Sections can include Anatomy ot Guidelines specific to their part of the pattern.

Related Components (listing with links)

Here should e a list of all components that are affected by or a part of this pattern.

General Rules

1. Sentences should be short and use easy language.
2. Repetition of information should be avoided. A detailed description should exist only once and further mentions should be short and relevant to the situation.
3. A listing of information during a paragraph should use bullet points instead of text.
4. Information should always be accompanied by a picture visualizing the information.
5. An Image should be labeled if they give information that is not described in the text accompanying it.
6. Where other patterns or components are mentioned, they should be linked.

Tags

The Documentation has 4 types of tags: draft, new, updated, caution.

Syntax:

---
title: 
note: 
tags:
- (place the tag name written in lowercase letters here)
--- 

Draft

A page with this tag has content that is actively in development or unfinished. Therefor the published article is currently unfinished. Following scenarios might apply:

• The item of the page, for example a component, is currently in its initial development.
• Information in an article, for example a pattern, is being reworked and thereby subject to change.
• A page in the wiki is being created, and the published version is not the desired final state.

A note at the beginning of an article can explain what the development in question is referring to.

New

After a pages first creation it receives the tag "new". This tag vanishes after two months of being present.

Updated

After receiving significant changes in content, a page receives the "updated" tag. This tag vanishes after one month. Significant pages include but are not limited to:

• Addition - New information is added to the page. For example, a component has a new feature.
• Deletion - Outdated or wrong information gets removed from a page.
• Alteration - Information on the page is fundamentally changed. For example, a pattern is restructured. This does not include purely editorial changes.

Caution

If a page contains critical content, it receives the "caution"-tag. This applies to both the text and the information behind it. Examples for critical information:

• A page shows outdated information that might mislead the user.
• The subject of the page, for example a component, is not working as designed and needs to be changed.
• Information on a page is not verified.
• Multiple users have reported problems with this page.

A note at the start of the page might give further information on the critical content.

Alters

Alerts are colored boxes that can be placed at the beginning of a page, under der h1 heading. They give general information about the following article. There are two types of notes:

Note

An article might have meta information that is critical to the understanding of the page. For example, there are two pages called Boardlet. A note at the beginning of a page informs them what page they are on, what the page contains, and gives a link to the other page.

Syntax:

> [!NOTE]
> Text inside the alert.

Example:

[!NOTE] This article is about the Boardlet Pattern. For more information about the boardlet component in the App Composer, please visit this page.

Warning

The "caution" or "draft" tags might need further explanation. This explanation is placed in an alert at the beginning of the article. This alert describes

• Caution - The nature of the critical content in the page.
• Draft - The kind of draft (from scratch or changes) and what parts are being changed.

Syntax:

> [!WARNING]
> Text inside the alert.

Example:

[!WARNING] This component might not work as intended. Please use with caution.