` element is part of the `@swisspost/design-system-components` package.
+For more information, read the [getting started with components guide](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs).
+
+## Examples
+
+Horizontal List
+Set the `horizontal` property to `true`to make the list horizontal.
+
+
+Hidden Title
+The title can be visually hidden but should always be present for accessibility reasons.
+Set the `title-hidden` property to `true`to visually hide the title.
+
+
+
+List Styling
+
+--post-list-title-gap
+
+ Define the gap between the title and the list items using the `--post-list-title-gap` property (
+ e.g., `--post-list-title-gap: 2rem;`).
+
+
+--post-list-item-gap
+
+ Define the gap of the list items using the `--post-list-item-gap` property (e.g.
+ `--post-list-item-gap: 1rem 0.5rem;`).
+
+
+
diff --git a/packages/documentation/src/stories/components/list/list.snapshot.stories.ts b/packages/documentation/src/stories/components/list/list.snapshot.stories.ts
new file mode 100644
index 0000000000..67e1efc59b
--- /dev/null
+++ b/packages/documentation/src/stories/components/list/list.snapshot.stories.ts
@@ -0,0 +1,52 @@
+import type { Args, StoryContext, StoryObj, StoryFn } from '@storybook/web-components';
+import meta from './list.stories';
+import { html } from 'lit';
+import { bombArgs } from '@/utils';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+ ...metaWithoutId,
+ title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const PostList: Story = {
+ render: () => {
+ return html`
+
+ ${bombArgs({
+ titleHidden: [false, true],
+ horizontal: [false, true],
+ itemGap: ['1rem', '2rem', '5rem'], // Variations for item gap
+ headingGap: ['1rem', '5rem', '10rem'], // Variations for heading gap
+ })
+ .filter((args: Args) => !(args.titleHidden && args.headingGap !== '1rem'))
+ .map((args: Args) => {
+ return html`
+
+ List Title
+ Item 1
+ Item 2
+ Item 3
+
+ `;
+ })}
+
${story(context.args, context)}
`;
+ return storyTemplate;
+ },
+ ],
+};
diff --git a/packages/documentation/src/stories/components/list/list.stories.ts b/packages/documentation/src/stories/components/list/list.stories.ts
new file mode 100644
index 0000000000..76000871b2
--- /dev/null
+++ b/packages/documentation/src/stories/components/list/list.stories.ts
@@ -0,0 +1,90 @@
+import { StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+ id: '18566ca9-4502-4053-89f0-db5fdf6f906e',
+ title: 'Components/List',
+ tags: ['package:WebComponents'],
+ component: 'post-list',
+ parameters: {
+ badges: [],
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=558-7013&t=tiW8c2NHXI0mcJa5-1',
+ },
+ },
+ args: {
+ horizontal: false,
+ titleHidden: false,
+ listItemGap: null,
+ listTitleGap: null,
+ },
+ argTypes: {
+ listItemGap: {
+ name: '--post-list-item-gap',
+ description: 'Defines the gap between list items.',
+ control: { type: 'number', min: 0, max: 10, step: 1 },
+ table: {
+ category: 'Styling',
+ },
+ },
+ listTitleGap: {
+ name: '--post-list-title-gap',
+ description: 'Defines the gap between the title and the list items.',
+ control: { type: 'number', min: 0, max: 10, step: 1 },
+ table: {
+ category: 'Styling',
+ },
+ },
+ },
+ render: args =>
+ html`
+ Title
+ List Item 1
+ List Item 2
+ List Item 3
+ `,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const PostListHorizontal: Story = {
+ render: () =>
+ html`
+ Title
+ List Item 1
+ List Item 2
+ List Item 3
+ `,
+};
+
+export const PostListNoTitle: Story = {
+ render: () =>
+ html`
+ Title
+ List Item 1
+ List Item 2
+ List Item 3
+ `,
+};
+
+export const PostListStyling: Story = {
+ render: () =>
+ html`
+ Title
+ List Item 1
+ List Item 2
+ List Item 3
+ `,
+};