{"id":28050678,"url":"https://github.com/fdmediagroep/fd-design-system","last_synced_at":"2025-05-12T00:54:33.933Z","repository":{"id":37087226,"uuid":"278334244","full_name":"FDMediagroep/fd-design-system","owner":"FDMediagroep","description":"FD Design System","archived":false,"fork":false,"pushed_at":"2025-05-08T09:57:25.000Z","size":16103,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-05-12T00:53:10.012Z","etag":null,"topics":["component-library","css-modules","design-system","design-tokens","fdmediagroep","fdmg","github-actions","github-packages","nextjs","npm","npm-module","npm-package","reactjs","scss-modules","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://design-system.fd.nl","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FDMediagroep.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-07-09T10:29:16.000Z","updated_at":"2025-05-08T09:55:43.000Z","dependencies_parsed_at":"2023-12-21T12:34:44.797Z","dependency_job_id":"e390a06e-4a2a-4c44-9311-71701aa43b23","html_url":"https://github.com/FDMediagroep/fd-design-system","commit_stats":{"total_commits":1413,"total_committers":7,"mean_commits":"201.85714285714286","dds":0.4543524416135881,"last_synced_commit":"3421d009f4224a449631eaa447500e8913a1aae1"},"previous_names":[],"tags_count":202,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDMediagroep%2Ffd-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDMediagroep%2Ffd-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDMediagroep%2Ffd-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FDMediagroep%2Ffd-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FDMediagroep","download_url":"https://codeload.github.com/FDMediagroep/fd-design-system/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253655955,"owners_count":21943081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","css-modules","design-system","design-tokens","fdmediagroep","fdmg","github-actions","github-packages","nextjs","npm","npm-module","npm-package","reactjs","scss-modules","typescript","vercel"],"created_at":"2025-05-12T00:54:33.297Z","updated_at":"2025-05-12T00:54:33.903Z","avatar_url":"https://github.com/FDMediagroep.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e :exclamation: **DEPRECATED** :exclamation: : Sunsetting.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://design-system.fd.nl\" target=\"_BLANK\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg width=\"160\" src=\"https://github.com/FDMediagroep/fd-design-system/raw/master/public/assets/icons/logo.svg?sanitize=true\" alt=\"FD Design System\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cspan\u003e\n        \u003cimg src=\"https://github.com/FDMediagroep/fd-design-system/workflows/Build/badge.svg\" alt=\"Build\"/\u003e\n    \u003c/span\u003e\n    \u003cspan\u003e\n        \u003cimg src=\"https://github.com/FDMediagroep/fd-design-system/workflows/Publish/badge.svg\" alt=\"Publish\"/\u003e\n    \u003c/span\u003e\n    \u003cspan\u003e\n        \u003cimg src=\"https://github.com/FDMediagroep/fd-design-system/workflows/CodeQL/badge.svg\" alt=\"Code Quality\"/\u003e\n    \u003c/span\u003e\n    \u003ca href=\"https://coveralls.io/github/FDMediagroep/fd-design-system?branch=master\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg src=\"https://coveralls.io/repos/github/FDMediagroep/fd-design-system/badge.svg?branch=master\" alt=\"Test coverage\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://npmjs.com/package/@fdmg%2Fdesign-system\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/@fdmg/design-system?color=blue\" alt=\"NPM version\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://bundlephobia.com/result?p=@fdmg/design-system\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/@fdmg/design-system\" alt=\"Bundle-size minified+gzip\"/\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n# FD Design System\n\n[Design System](https://design-system.fd.nl) for components used by [FD.nl](https://fd.nl).\n\nThe Design System is created to be used in the following ways:\n\n-   **Component Library**\n    -   Skip to [installation](#installation) if you intend to use it as a Component Library within your own [React](https://reactjs.org/) project. [List of components](#components) and how to use it is described further [below](#components).\n-   **Design Documentation**\n    -   The [Design Documentation](https://design-system.fd.nl) is a website which allows you to preview the components. It also documents the design tokens and reasoning behind the designs.\n-   **CSS + HTML code generator**\n    -   Each component also outputs generated CSS and HTML which you can copy and use stand-alone in your own website. This is useful if you can't or don't want to make use of the Component Library. Just keep in mind that each component CSS generated this way works completely stand-alone and includes all the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (variables). If you intend to use multiple components then including the CSS Custom Properties only once in your own website is enough. Remember to strip the CSS Custom Properties from subsequent components you add to your website.\n\n## Installation\n\nInstall the `Design System` as dependency for your project:\n\n-   NPMJS: `npm i @fdmg/design-system`\n\nor\n\n-   GitHub Packages: `https://github.com/FDMediagroep/fd-design-system/packages`\n\n## TypeScript support\n\nTypeDefinitions are available and included.\n\n## Getting started\n\nThese are the only steps you need to follow in order to use our components.\n\n1. Import our CSS style(s)\n    - It's possible to omit this and use your own styles instead.\n    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).\n1. Import and implement our component(s).\n    - You can choose to import components individually (as shown in the code examples for each component) or import main module. Importing components individually allows you to only bundle the components you use.\n\nExample code are listed [below](#components).\n\n## Components\n\n**Global CSS:**\n\n```\nimport \"@fdmg/design-system/main.css\";\n```\n\nContains all the CSS for all the components. It's possible to only include the CSS for each component separately.\nThe individual imports are shown in the code examples.\n\n**Main component module:**\n\n```\nimport { ...component... } from \"@fdmg/design-system\";\n```\n\nThe main entry point exports all the available components. This however means your asset bundle will contain all the components regardless of if you actually make use of it.\n\nThe reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate\nCSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.\nWhen using Rollup to build our library we can get a proper ESM library which is tree-shakeable however the CSS will be compiled into a single file which forces you to load all the styles of all components regardless of which ones you're using.\n\nSo as of the time of writing Webpack still offers the best of both worlds with the minor inconvenience of locating the specific module you want to import.\n\n**React:**\n\n```\nimport React from 'react';\n```\n\nAll components import React even though the example codes don't reflect that.\n\n---\n\n### Article\n\n\u003cdetails\u003e\n\u003csummary\u003eArticleMeta\u003c/summary\u003e\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-meta/ArticleMeta.css\";\n```\n\n```\nimport { ArticleMeta } from \"@fdmg/design-system/components/input/ArticleMeta\";\n\nfunction Foo() {\n    return (\n        \u003cArticleMeta authors={[\"fullName\": \"Willem L.\"]}/\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eArticleImage\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-image)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-image/ArticleImage.css\";\n```\n\n```\nimport { ArticleImage } from \"@fdmg/design-system/components/article-image/ArticleImage\";\n\nfunction Foo() {\n    return (\n        \u003cArticleImage\n            baseUrl=\"https://images.example.com\"\n            caption=\"What a photo\"\n            credit=\"Foto: Willem L.\"\n            fileName=\"image.jpg\"/\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eArticleTags\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-tags)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-tags/ArticleTags.css\";\n```\n\n```\nimport { ArticleTags } from \"@fdmg/design-system/components/article-tags/ArticleTags\";\n\nfunction Foo() {\n    return (\n        \u003cArticleTags\n            onDisableAlertClick={() =\u003e {}}\n            onEnableAlertClick={() =\u003e {}}\n            onFollowClick={() =\u003e {}}\n            onUnfollowClick={() =\u003e {}}\n            title=\"Volgen via mijn nieuws\"\n            titleLink=\"https://fd.nl/mijn-nieuws\"\n            tags={[\n                {\n                    tag: 'Detailhandel',\n                    uuid: '1',\n                },\n                {\n                    selected: true,\n                    tag: 'Eten \u0026 Drinken',\n                    uuid: '2',\n                },\n                {\n                    alertSelected: true,\n                    selected: true,\n                    tag: 'Supermarkt',\n                    uuid: '3',\n                },\n            ]}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eBulletPoint\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-bullet-point)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/bullet-point/BulletPoint.css\";\n```\n\n```\nimport { BulletPoint } from \"@fdmg/design-system/components/bullet-point/BulletPoint\";\n\nfunction Foo() {\n    return (\n        \u003cBulletPoint bullets={[\"bullet 1\" \"bullet 2\"]}/\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFinancial Agenda\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/financial-agenda)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/financial-agenda/FinancialAgenda.css\";\n```\n\n```\nimport { FinancialAgenda } from \"@fdmg/design-system/components/financial-agenda/FinancialAgenda\";\n\nfunction Foo() {\n    return (\n        \u003cFinancialAgenda\n            agendaItems={[\n                {\n                    date: '25 mei',\n                    source: 'VK',\n                    description:\n                        'Bankholiday - financiële markten gesloten',\n                },\n                {\n                    date: '25 mei',\n                    source: 'VS',\n                    description:\n                        'Memorial day - financiële markten gesloten',\n                },\n            ]}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eInfographic\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-infographic)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/infographic/Infographic.css\";\n```\n\n```\nimport { Infographic } from \"@fdmg/design-system/components/infographic/Infographic\";\n\nfunction Foo() {\n    return (\n        \u003cInfographic src=\"https://example.com/image.png\" height=\"400\" /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eLatest News (article)\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-latest-news)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-latest-news/ArticlelatestNews.css\";\n```\n\n```\nimport { ArticleLatestNews } from \"@fdmg/design-system/components/article-latest-news/ArticleLatestNews\";\n\nfunction Foo() {\n    return (\n        \u003cArticleLatestNews\n            news={[\n                {\n                    uuid: '1',\n                    dateTime: `11:18`,\n                    title: `Provinciale lijsttrekkers CDA: stop met 'drammen en dromen' over klimaat`,\n                    url: `https://fd.nl/economie-politiek/1288207/provinciale-lijsttrekkers-cda-stop-met-drammen-en-dromen-over-klimaat`,\n                },\n                {\n                    uuid: '2',\n                    dateTime: `11:15`,\n                    title: `Luchtvaartbedrijf Germania valt om`,\n                    url: `https://fd.nl/ondernemen/1288215/luchtvaartbedrijf-germania-valt-om`,\n                    isRead: true,\n                },\n                {\n                    uuid: '3',\n                    dateTime: `11:10`,\n                    title: `Britse dienstensector krijgt harde tik van brexit`,\n                    url: `https://fd.nl/economie-politiek/1288213/britse-dienstensector-krijgt-harde-tik-van-brexit`,\n                },\n                {\n                    uuid: '4',\n                    dateTime: `11:00`,\n                    title: `DNB: Bovag-garantie toch geen verzekering`,\n                    url: `https://fd.nl/ondernemen/1288299/dnb-bovag-garantie-toch-geen-verzekering`,\n                },\n            ]}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eLinkBlock\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-link-block)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-link-block/LinkBlock.css\";\n```\n\n```\nimport { LinkBlock } from \"@fdmg/design-system/components/article-link-block/LinkBlock\";\n\nfunction Foo() {\n    return (\n        \u003cLinkBlock title=\"Read more\" description=\"Click here to read all about it\" url=\"https://fd.nl\"/\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eLinkCard\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-link-card)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-link-card/LinkCard.css\";\n```\n\n```\nimport { LinkCard as ArticleLinkCard } from \"@fdmg/design-system/components/article-link-card/LinkCard\";\n\nfunction Foo() {\n    return (\n        \u003cArticleLinkCard\n            link=\"/mijn-nieuws\"\n            title=\"Beheer\"\n            linkText=\"Ga naar laatste nieuws\"\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNumberFrame\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/numberframe)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/numberframe/NumberFrame.css\";\n```\n\n```\nimport { NumberFrame } from \"@fdmg/design-system/components/numberframe/NumberFrame\";\n\nfunction Foo() {\n    return (\n        \u003cNumberFrame\n            number=`80%`,\n            description=`of the statistiscs found on the internet are lies`\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eQuote\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/quote)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/quote/Quote.css\";\n```\n\n```\nimport { Quote } from \"@fdmg/design-system/components/quote/Quote\";\n\nfunction Foo() {\n    return (\n        \u003cQuote\n            blockquote={`This is the quote text`},\n            figcaption={`Willem L.`}\n\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eReadMore\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/readmore)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/readmore/ReadMore.css\";\n```\n\n```\nimport { ReadMore } from \"@fdmg/design-system/components/readmore/ReadMore\";\n\nfunction Foo() {\n    return (\n        \u003cReadMore\n            title=`Lees ook`,\n            links=[\n                `A \u003ca href=\"http://fd.nl\"\u003elink\u003c/a\u003e`,\n                `Another \u003ca href=\"https://www.willemliu.nl\"\u003elink\u003c/a\u003e`\n            ]\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRelatedTopics\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-related-topics)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-related-topics/RelatedTopics.css\";\n```\n\n```\nimport { RelatedTopics } from \"@fdmg/design-system/components/article-related-topics/RelatedTopics\";\n\nfunction Foo() {\n    return (\n        \u003cRelatedTopics topics={[{\n                topic: 'Topic 1',\n                href: '/tag/topic1',\n                onClick: () =\u003e {},\n                selected: false,\n            },\n            {\n                topic: 'Topic 2',\n                href: '/tag/topic2',\n                selected: true,\n                onClick: () =\u003e {},\n            },\n            {\n                topic: 'Topic 3',\n                href: '/tag/topic3',\n                selected: false,\n                onClick: () =\u003e {},\n            }]}/\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSummary\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/article-summary)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/article-summary/Summary.css\";\n```\n\n```\nimport { Summary } from \"@fdmg/design-system/components/article-summary/Summary\";\n\nfunction Foo() {\n    return (\n        \u003cSummary\n            title=\"Samenvatting\"\n            summaries=[\n                \"Bulletpoint samenvatting 1\"\n                \"Bulletpoint samenvatting 2\"\n                \"Bulletpoint samenvatting 3\"\n            ]/\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTextFrame\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/textframe)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/textframe/TextFrame.css\";\n```\n\n```\nimport { TextFrame } from \"@fdmg/design-system/components/textframe/TextFrame\";\n\nfunction Foo() {\n    return (\n        \u003cTextFrame\n            title=`TextFrame test`,\n            description=`Aenean lacinia bibendum nulla sed consectetur. Donec id elit non\nmi porta gravida at eget metus. Cum sociis natoque penatibus et\nmagnis dis parturient montes, nascetur ridiculus mus.`\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eToolbar horizontal\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/toolbar/horizontal)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/toolbar/HorizontalToolbar.css\";\n```\n\n```\nimport { HorizontalToolbar } from \"@fdmg/design-system/components/toolbar/HorizontalToolbar\";\n\nfunction Foo() {\n    return (\n        \u003cHorizontalToolbar\n            id=\"12345\"\n            bookmarked={bookmarked}\n            onClick={handleClick}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eToolbar vertical\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/toolbar/vertical)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/toolbar/VerticalToolbar.css\";\n```\n\n```\nimport { VerticalToolbar } from \"@fdmg/design-system/components/toolbar/VerticalToolbar\";\n\nfunction Foo() {\n    return (\n        \u003cVerticalToolbar\n            id=\"12345\"\n            bookmarked={bookmarked}\n            onClick={handleClick}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVimeo\u003c/summary\u003e\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/vimeo/Vimeo.css\";\n```\n\n```\nimport { Vimeo } from \"@fdmg/design-system/components/vimeo/Vimeo\";\n\nfunction Foo() {\n    return (\n        \u003cVimeo id=\"\u003cvimeo id\u003e\" /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWordFrame\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/wordframe)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/wordframe/WordFrame.css\";\n```\n\n```\nimport { WordFrame } from \"@fdmg/design-system/components/wordframe/WordFrame\";\n\nfunction Foo() {\n    return (\n        \u003cWordFrame\n            title=`WordFrame test`,\n            description=`Aenean lacinia bibendum nulla sed consectetur. Donec id elit non\nmi porta gravida at eget metus. Cum sociis natoque penatibus et\nmagnis dis parturient montes, nascetur ridiculus mus.`\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eYoutube\u003c/summary\u003e\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/youtube/Youtube.css\";\n```\n\n```\nimport { Youtube } from \"@fdmg/design-system/components/youtube/Youtube\";\n\nfunction Foo() {\n    return (\n        \u003cYoutube id=\"\u003cYoutube id\u003e\" /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n### Controls\n\n\u003cdetails\u003e\n\u003csummary\u003eBreaking Switch\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/breaking-switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/BreakingSwitch.css\";\n```\n\n```\nimport { BreakingSwitch } from \"@fdmg/design-system/components/input/BreakingSwitch\";\n\ninterface Props {\n    checked?: boolean;\n}\n\nfunction Foo(props: Props) {\n    const [checked, setChecked] = useState(props.checked);\n\n    function handleChange(e: React.ChangeEvent\u003cHTMLInputElement\u003e) {\n        setChecked(e.currentTarget.checked);\n    }\n\n    return (\n        \u003cBreakingSwitch\n            label=\"Label of the switch\"\n            checked={checked}\n            onChange={handleChange}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eButton\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/button/button)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/button/Button.css\";\n```\n\n```\nimport { Button } from \"@fdmg/design-system/components/button/Button\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        \u003cButton onClick={handleClick}\u003eClick me!\u003c/Button\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eButton CTA (call-to-action)\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/button/cta)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/button/ButtonCta.css\";\n```\n\n```\nimport { ButtonCta } from \"@fdmg/design-system/components/button/ButtonCta\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        \u003cButtonCta onClick={handleClick}\u003eClick me!\u003c/ButtonCta\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eButton Follow\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/button/follow)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/button/ButtonFollow.css\";\n```\n\n```\nimport { useState } from 'react';\nimport { ButtonFollow } from \"@fdmg/design-system/components/button/ButtonFollow\";\n\nfunction Foo() {\n    const [follow, setFollow] = useState(false);\n    function handleClick() {\n        console.log('clicked');\n        setFollow(!follow);\n    }\n\n    return (\n        \u003cButtonFollow selected={follow} onClick={handleClick}\u003eClick me!\u003c/ButtonFollow\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eGhost Button\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/button/ghost)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/button/ButtonGhost.css\";\n```\n\n```\nimport { ButtonGhost } from \"@fdmg/design-system/components/button/ButtonGhost\";\n\nfunction Foo() {\n    function handleClick() {\n        console.log('clicked');\n    }\n\n    return (\n        \u003cButtonGhost onClick={handleClick}\u003eClick me!\u003c/ButtonGhost\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eCheckbox\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/checkbox)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/Checkbox.css\";\n```\n\n```\nimport { Checkbox } from \"@fdmg/design-system/components/input/Checkbox\";\n\nfunction Foo() {\n    return (\n        \u003cSwitch\n            id=\"idOfCheckbox\"\n            label=`Label of the checkbox`\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eDropdown\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/button/dropdown)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/button/Dropdown.css\";\n```\n\n```\nimport { Dropdown } from \"@fdmg/design-system/components/button/Dropdown\";\n\nfunction Foo() {\n    const [expanded, setExpanded] = useState(false);\n    function handleClick() {\n        console.log('toggle!');\n        setExpanded((expanded) =\u003e !expanded)\n    }\n\n    return (\n        \u003cDropdown expanded={expanded} onClick={handleClick}\u003eClick me!\u003c/Dropdown\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eDate input\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/dateinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        \u003cTextInput id=\"demoDateInput\" type=\"date\" label=\"Birthday\" /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eEmail input\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/emailinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        \u003cTextInput id=\"demoEmailInput\" type=\"email\" label=\"E-mail\" pattern={Patterns.EMAIL} required={true} /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMobile input (tel)\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/mobileinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput, Patterns } from \"@fdmg/design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        \u003cTextInput id=\"demoMobileInput\" type=\"tel\" label=\"E-mail\" pattern={Patterns.MOBILE} required={true} /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRadio\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/radio)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/Radio.css\";\n```\n\n```\nimport { Radio } from \"@fdmg/design-system/components/input/Radio\";\n\nfunction Foo() {\n    return (\n        \u003c\u003e\n            \u003cRadio\n                id=\"idOfRadio\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n                defaultChecked={true}\n            /\u003e\n            \u003cRadio\n                id=\"idOfRadio2\"\n                name=\"groupName\"\n                label=`Label of the radio button`\n            /\u003e\n        \u003c/\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSelect\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/select)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/Select.css\";\n```\n\n```\nimport { Select } from \"@fdmg/design-system/components/input/Select\";\n\nfunction Foo() {\n    return (\n        \u003cSelect\n            id=\"demoSelect\"\n            label=\"Aanhef\"\n            errorMessage=\"Kies uw aanhef\"\n            required={true}\n            description=\"Disabled select field\"\n        \u003e\n            \u003coption value=\"\"\u003e-- aanhef --\u003c/option\u003e\n            \u003coption value=\"dhr\"\u003eDhr.\u003c/option\u003e\n            \u003coption value=\"mevr\"\u003eMevr.\u003c/option\u003e\n            \u003coption value=\"mw\"\u003eMw.\u003c/option\u003e\n            \u003coption value=\"drs\"\u003eDrs.\u003c/option\u003e\n            \u003coption value=\"Prof\"\u003eProf.\u003c/option\u003e\n        \u003c/Select\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSwitch\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/switch)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/Switch.css\";\n```\n\n```\nimport { Switch } from \"@fdmg/design-system/components/input/Switch\";\n\nfunction Foo() {\n    return (\n        \u003cSwitch\n            id=\"idOfSwitch\"\n            label=`Label of the switch`\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTextArea\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/textarea)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/TextArea.css\";\n```\n\n```\nimport { TextArea } from \"@fdmg/design-system/components/input/TextArea\";\n\nfunction Foo() {\n    return (\n        \u003cTextArea id=\"demoTextArea\" label=\"Biography\" required={true} /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eText input\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/input/textinput)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/input/TextInput.css\";\n```\n\n```\nimport { TextInput } from \"@fdmg/design-system/components/input/TextInput\";\n\nfunction Foo() {\n    return (\n        \u003cTextInput id=\"demoTextInput\" label=\"Name\" placeholder=\"Willem Liu\" /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n### Cards\n\n\u003cdetails\u003e\n\u003csummary\u003eHorizontal Card 1\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/horizontal-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/HorizontalCard1.css\";\n```\n\n```\nimport { HorizontalCard1 } from \"@fdmg/design-system/components/card/HorizontalCard1\";\n\nfunction Foo() {\n    return (\n        \u003cHorizontalCard1\n            id=\"1343811\"\n            url=\"https://fd.nl/ondernemen/1343811/omzet-alfen-in-eerste-coronakwartaal-58\"\n            imageUrl=\"https://images.fd.nl/C_yJRp_QqzybEdlK4D6SibEUxiA.jpg?rect=.0,.0,.73375,.9999999999999999\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=300\"\n            label=\"Energie\"\n            time=\"08:10\"\n            title=\"Omzet Alfen stijgt in eerste coronakwartaal met 58%\"\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHorizontal Card 2\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/horizontal-2)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/HorizontalCard2.css\";\n```\n\n```\nimport { HorizontalCard2 } from \"@fdmg/design-system/components/card/HorizontalCard2\";\n\nfunction Foo() {\n    return (\n        \u003cHorizontalCard2\n            id=\"1343052\"\n            url=\"https://fd.nl/futures/1343052/levensgevaarlijk-libanon\"\n            label=\"Levensgevaarlijk Libanon\"\n            time=\"13:11\"\n            title=\"Omgekeerde kruistocht\"\n            intro=\"Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons.\"\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHorizontal Card 4\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/horizontal-4)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/HorizontalCard4.css\";\nimport \"@fdmg/design-system/components/utils/image/FdImgix\";\n```\n\n```\nimport { HorizontalCard4 } from \"@fdmg/design-system/components/card/HorizontalCard4\";\nimport { FdImgix } from '@fdmg/design-system/components/utils/image/FdImgix';\n\nfunction Foo() {\n    return (\n        \u003cHorizontalCard4\n            className=\"xs-12\"\n            imageComponent={\n                \u003cFdImgix\n                    src=\"https://fd-internal-development.imgix.net/XSsvNsfpytwq-OQdMRmsCm7J1i8.jpg?auto=format\"\n                    imageSizes={{\n                        widthS: '160px',\n                        widthM: '244px',\n                        widthL: '244px',\n                    }}\n                /\u003e\n            }\n            id=\"1343052a\"\n            url=\"https://fd.nl/futures/1343052/levensgevaarlijk-libanon\"\n            label=\"Omgekeerde kruistocht\"\n            time=\"13:11\"\n            title=\"Levensgevaarlijk Libanon\"\n            intro=\"Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons.\"\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHybrid Card 1\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/hybrid-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/HybridCard1.css\";\n```\n\n```\nimport { HybridCard1 } from \"@fdmg/design-system/components/card/HybridCard1\";\n\nfunction Foo() {\n\n    function handleBookmark(e) {\n        console.log(e);\n    }\n\n    return (\n        \u003cHybridCard1\n            id=\"1343052\"\n            url=\"https://fd.nl/futures/1343052/levensgevaarlijk-libanon\"\n            imageUrl=\"https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=300\"\n            imageUrlS=\"https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=300\"\n            imageUrlM=\"https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=351\u0026h=234\"\n            imageUrlL=\"https://images.fd.nl/2V1xFJ-1OddgzcJgKmiPOv0t4yY.jpg?fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=599\u0026h=399\"\n            label=\"Levensgevaarlijk Libanon\"\n            time=\"13:11\"\n            title=\"Omgekeerde kruistocht\"\n            intro=\"Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons.\"\n            bookmarked={false}\n            onBookmark={handleBookmark}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHybrid Card 2\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/hybrid-2)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/HybridCard2.css\";\n```\n\n```\nimport { HybridCard2 } from \"@fdmg/design-system/components/card/HybridCard2\";\n\nfunction Foo() {\n\n    function handleBookmark(e) {\n        console.log(e);\n    }\n\n    return (\n        \u003cHybridCard2\n            id=\"1343052\"\n            url=\"https://fd.nl/futures/1343052/levensgevaarlijk-libanon\"\n            label=\"Levensgevaarlijk Libanon\"\n            time=\"13:11\"\n            title=\"Omgekeerde kruistocht\"\n            intro=\"Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons.\"\n            bookmarked={false}\n            onBookmark={handleBookmark}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHybrid Card 4\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/hybrid-4)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/HybridCard4.css\";\nimport \"@fdmg/design-system/components/utils/image/FdImgix.css\";\n```\n\n```\nimport { HybridCard4 } from \"@fdmg/design-system/components/card/HybridCard4\";\nimport { FdImgix } from '@fdmg/design-system/components/utils/image/FdImgix';\n\nfunction Foo() {\n    return (\n        \u003cHybridCard4\n            id=\"1345386\"\n            label=\"Markten\"\n            title=\"Beleggers verwachten nieuwe klap op beurzen\",\n            url=\"https://fd.nl/beurs/1345386/amerikaanse-technologiebeurs-nasdaq-wordt-mogelijk-strenger-dan-euronext\"\n            intro: `Een tweede coronagolf staat bovenaan de lijst met zorgen van fondsmanagers, volgens een enquête van Bank of America.`,\n            imageComponent={\n                \u003cFdImgix\n                    src=\"https://fd-internal-development.imgix.net/XSsvNsfpytwq-OQdMRmsCm7J1i8.jpg?auto=format\"\n                    imageSizes={{\n                        widthS: '300px',\n                        widthM: '351px',\n                        widthL: '599px',\n                    }}\n                /\u003e\n            }\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eLinkCard\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/link-card)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/LinkCard.css\";\n```\n\n```\nimport { LinkCard } from \"@fdmg/design-system/components/card/LinkCard\";\n\nfunction Foo() {\n    return (\n        \u003cLinkCard\n            link=\"/mijn-nieuws\"\n            title=\"Beheer\"\n            linkText=\"Ga naar laatste nieuws\"\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVertical Card 1\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/vertical-1)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/VerticalCard1.css\";\n```\n\n```\nimport { VerticalCard1 } from \"@fdmg/design-system/components/card/VerticalCard1\";\n\nfunction Foo() {\n\n    function handleBookmark(e) {\n        console.log(e);\n    }\n\n    return (\n        \u003cVerticalCard1\n            id=\"1343052\"\n            url=\"https://fd.nl/futures/1343052/levensgevaarlijk-libanon\"\n            imageUrl=\"https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=599\u0026h=399\"\n            imageUrlS=\"https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=599\u0026h=399\"\n            imageUrlM=\"https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=351\u0026h=234\"\n            imageUrlL=\"https://images.fd.nl/Cz9PTU-el_agiaSDvJOfmwrvu6g.jpg?rect=.0%2c.0428571428571429%2c.9999999999999999%2c.95\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=599\u0026h=399\"\n            label=\"Levensgevaarlijk Libanon\"\n            time=\"13:11\"\n            title=\"Omgekeerde kruistocht\"\n            intro=\"Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons.\"\n            bookmarked={false}\n            onBookmark={handleBookmark}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVertical Card 5\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/vertical-5)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/VerticalCard5.css\";\n```\n\n```\nimport { VerticalCard5 } from \"@fdmg/design-system/components/card/VerticalCard5\";\n\nfunction Foo() {\n    return (\n        \u003cVerticalCard5\n            id=\"1321841\"\n            imageUrl=\"https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0018761726078799%2c.9999999999999999%2c.99812382739212\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=560\u0026h=315\"\n            imageUrlS=\"https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0018761726078799%2c.9999999999999999%2c.99812382739212\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=560\u0026h=315\"\n            imageUrlM=\"https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0637898686679174%2c.9999999999999999%2c.8442776735459663\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=944\u0026h=531\"\n            imageUrlL=\"https://fd-external-development.imgix.net/b2ee977d67c3a1b815ed2855a5ae02f2357e6062.jpg?rect=.0%2c.0637898686679174%2c.9999999999999999%2c.8442776735459663\u0026fit=crop\u0026crop=faces\u0026auto=format\u0026q=45\u0026w=944\u0026h=531\"\n            title=\"Den Haag zet druk op verhuurders om huurverlaging te slikken\"\n            intro=\"Het Rijk sluit overheidsingrijpen niet uit om een akkoord tussen verhuurders en winkeliers af te dwingen, nu onderhandelingen moeizaam verlopen.\"\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVertical Card 6\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/card/vertical-6)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/card/VerticalCard6.css\";\nimport \"@fdmg/design-system/components/utils/image/FdImgix.css\";\n```\n\n```\nimport { VerticalCard6 } from \"@fdmg/design-system/components/card/VerticalCard6\";\nimport { FdImgix } from \"@fdmg/design-system/components/utils/image/FdImgix\";\n\nfunction Foo() {\n    return (\n        \u003cVerticalCard6\n            className=\"xs-12 s-6 m-4 l-3\"\n            imageComponent={\n                \u003cFdImgix\n                    src={\"https://fd-internal-development.imgix.net/XSsvNsfpytwq-OQdMRmsCm7J1i8.jpg?auto=format\"}\n                    imageSizes={{\n                        widthS: '300px',\n                        widthM: '351px',\n                        widthL: '599px',\n                    }}\n                /\u003e\n            }\n            id=\"1345422\"\n            label=\"Arbeidsmarkt\"\n            title=\"Lockdown leidt tot recordstijging aantal WW-uitkeringen in april\"\n            url=\"https://fd.nl/economie-politiek/1345422/lockdown-leidt-tot-recordstijging-aantal-ww-uitkeringen-in-april\"\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n### Misc.\n\n\u003cdetails\u003e\n\u003csummary\u003eA/B Testing component\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/ab)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/ab/ab.css\"; // For debug options layout\n```\n\n```\nimport { Experiment, Variant, ABProvider } from \"@fdmg/design-system/components/ab/ab\";\n\nfunction Foo() {\n    return (\n        \u003cABProvider\u003e\n            \u003cExperiment\n                name=\"globally-unique-experiment-name\"\n                debugUriParam=\"ABdebug=true\"\n                onClick={console.log}\n                onRunExperiment={console.log}\n            \u003e\n                \u003cVariant name=\"A\" onClick={console.log}\u003e\n                    \u003ch1\u003eHeadline 1\u003c/h1\u003e\n                \u003c/Variant\u003e\n                \u003cVariant name=\"B\" onClick={console.log}\u003e\n                    \u003ch1\u003eHeadline 2\u003c/h1\u003e\n                \u003c/Variant\u003e\n            \u003c/Experiment\u003e\n        \u003c/ABProvider\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAccordion\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/accordion)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/accordion/Accordion.css\";\n```\n\n```\nimport { Accordion } from '@fdmg/design-system/components/accordion/Accordion';\n\nfunction Foo() {\n    return (\n        \u003cAccordion items={[\n            {\n                title: 'title',\n                content: \u003cspan\u003edescription\u003c/span\u003e,\n            },\n        ]} /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAuthorInfo\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/author-info)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/author-info/AuthorInfo.css\";\n```\n\n```\nimport { AuthorInfo } from '@fdmg/design-system/components/author-info/AuthorInfo';\n\nfunction Foo() {\n    return (\n        \u003cAuthorInfo\n            description={\n                \u003cp\u003e\n                    Nelleke Trappenburg schrijft bij het FD over pensioenen:\n                    dekkingsgraden, beleggingskosten, nieuwe wetgeving etc.\n                    Eerder werkte zij onder meer op de beursredactie.\n                \u003c/p\u003e\n            }\n            imageUrl=\"https://images.fd.nl/ffa583e0c7fbc666934ecc326a88defc2773f4e9.jpeg?fit=crop\u0026amp;crop=faces\u0026amp;auto=format\u0026amp;q=45\u0026amp;cs=tinysrgb\u0026amp;w=640\u0026amp;h=640\u0026amp;fm=jpg\"\n            title=\"Nelleke Trappenburg\"\n            followed={mode === 'dark'}\n            onEmailClick={() =\u003e {}}\n            onFollowAuthorClick={() =\u003e {}}\n            onLinkedInClick={() =\u003e {}}\n            onTwitterClick={() =\u003e {}}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eCookieConsent\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/cookieconsent#cookie-consent)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/cookieconsent/CookieConsent.css\";\n```\n\n```\nimport { CookieConsent } from '@fdmg/design-system/components/cookieconsent/CookieConsent';\n\nfunction Foo() {\n    return (\n        \u003cCookieConsent\n            description={\n                \u003c\u003e\n                    \u003cp\u003e\n                        FD Mediagroep (FDMG) en de daarbij horende\n                        website: FD.nl en door haar geselecteerde\n                        Partners hebben toegang tot uw gegevens en\n                        gebruiken deze informatie voor de onderstaande\n                        doeleinden. Klik op een doel om uw voorkeuren\n                        aan te passen en om meer te weten te komen over\n                        wie er om uw toestemming vraagt en/of rechtmatig\n                        belang claimt om uw gegevens voor dat doel te\n                        verwerken. Houd er rekening mee dat wanneer alle\n                        doeleinden zijn geweigerd, dit een negatief\n                        effect op bepaalde functies van de website kan\n                        hebben.\n                    \u003c/p\u003e\n                    \u003cp\u003e\n                        Voor sommige doeleinden kunnen jouw\n                        persoonsgegevens worden verwerkt op de\n                        juridische grond van rechtmatig belang\n                    \u003c/p\u003e\n                \u003c/\u003e\n            }\n            title={\n                \u003cheader className={styles.header}\u003e\n                    \u003ch1\u003eCookies\u003c/h1\u003e\n                \u003c/header\u003e\n            }\n            opened={true}\n            onClose={() =\u003e {}}\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eLockedContent\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/cookieconsent#locked-content)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/cookieconsent/CookieConsent.css\";\n```\n\n```\nimport { LockedContent } from '@fdmg/design-system/components/cookieconsent/CookieConsent';\n\nfunction Foo() {\n    return (\n        \u003cLockedContent\n            vendorName=\"youtube\"\n            lockDescription={\n                \u003cp\u003e\n                    In verband met de door u gekozen\n                    cookievoorkeuren kunnen wij deze Youtube-video\n                    niet tonen. Klik hier om akkoord te gaan met de\n                    cookievoorkeuren die nodig zijn om deze\n                    Youtube-video te laden.\n                \u003c/p\u003e\n            }\n        \u003e\n            \u003cdiv className=\"embed-container\"\u003e\n                \u003ciframe\n                    width=\"560\"\n                    height=\"315\"\n                    src=\"https://www.youtube-nocookie.com/embed/T_tN4CnushY\"\n                    frameBorder=\"0\"\n                    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                    allowFullScreen\n                /\u003e\n            \u003c/div\u003e\n        \u003c/LockedContent\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eGrid\u003c/summary\u003e\n\nThe CSS Grid is an external component and can be found here:\n[Demo](https://design-system.fd.nl/grid)\n[Source](https://github.com/FDMediagroep/fdmg-css-grid)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eModal\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/modal)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/modal/Modal.css\";\n```\n\n```\nimport { Modal } from '@fdmg/design-system/components/modal/Modal';\n\nfunction Foo() {\n    return (\n        \u003cModal opened={true} onClose={() =\u003e {}}\u003e\n            \u003csection className=\"xs_p+4\"\u003e\n                \u003ch2\u003eAbonnement wijzigen of opzeggen\u003c/h2\u003e\n                \u003cp\u003e\n                    Voor wijzigingen kunt u elk moment bellen. Voor\n                    opzeggen geeft u dit uiterlijk 1 maand voor het\n                    einde van de abonnements- of actieperiode\n                    telefonisch door aan Klantenservice\n                \u003c/p\u003e\n                \u003cp\u003e\n                    \u003ca href=\"tel:0800 666 6667\"\u003e0800 666 6667\u003c/a\u003e{' '}\n                    (gratis, ma t/m vr 07.30 - 18.00 uur en za 07.30 -\n                    11.30 uur).\n                \u003c/p\u003e\n                \u003cp\u003e\n                    Ook kijken we graag samen met u naar een\n                    abonnementsvorm die wellicht beter bij u past.\n                \u003c/p\u003e\n                \u003cButtonCta className=\"close\"\u003eSluiten\u003c/ButtonCta\u003e\n            \u003c/section\u003e\n        \u003c/Modal\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eStockTicker\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/stock-ticker)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\nimport \"@fdmg/design-system/components/stockticker/StockTicker.css\";\n```\n\n```\nimport { StockTicker } from \"@fdmg/design-system/components/stockticker/StockTicker\";\n\nfunction Foo() {\n    return (\n        \u003cStockTicker\n            title=`Lees ook`,\n            links=[\n                `A \u003ca href=\"http://fd.nl\"\u003elink\u003c/a\u003e`,\n                `Another \u003ca href=\"https://www.willemliu.nl\"\u003elink\u003c/a\u003e`\n            ]\n        /\u003e\n    );\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTypography\u003c/summary\u003e\n\n[Demo](https://design-system.fd.nl/typography)\n\nComponent CSS:\n\n```\nimport \"@fdmg/design-system/components/design-tokens/design-tokens.css\";\n```\n\n```\nfunction Foo() {\n    return (\n        \u003ch1 className=\"heading serif xs\"\u003eHeading xs\u003c/h1\u003e\n        \u003ch1 className=\"heading serif s\"\u003eHeading s\u003c/h1\u003e\n        \u003ch1 className=\"heading serif m\"\u003eHeading m\u003c/h1\u003e\n        \u003ch1 className=\"heading serif l\"\u003eHeading l\u003c/h1\u003e\n        \u003ch1 className=\"heading serif xl\"\u003eHeading xl\u003c/h1\u003e\n        \u003ch1 className=\"heading serif xxl\"\u003eHeading xxl\u003c/h1\u003e\n\n        \u003ch1 className=\"heading sans xs\"\u003eHeading xs\u003c/h1\u003e\n        \u003ch1 className=\"heading sans s\"\u003eHeading s\u003c/h1\u003e\n        \u003ch1 className=\"heading sans m\"\u003eHeading m\u003c/h1\u003e\n        \u003ch1 className=\"heading sans l\"\u003eHeading l\u003c/h1\u003e\n        \u003ch1 className=\"heading sans xl\"\u003eHeading xl\u003c/h1\u003e\n        \u003ch1 className=\"heading sans xxl\"\u003eHeading xxl\u003c/h1\u003e\n\n        \u003cp className=\"body-text serif xs\"\u003ebody-text serif xs\u003c/p\u003e\n        \u003cp className=\"body-text serif s\"\u003ebody-text serif s\u003c/p\u003e\n        \u003cp className=\"body-text serif m\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text serif l\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text serif xl\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text serif xxl\"\u003eReserved\u003c/p\u003e\n\n        \u003cp className=\"body-text serif xs bold\"\u003e\n            body-text serif xs bold\n        \u003c/p\u003e\n        \u003cp className=\"body-text serif s bold\"\u003e\n            body-text serif s bold\n        \u003c/p\u003e\n        \u003cp className=\"body-text serif m bold\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text serif l bold\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text serif xl bold\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text serif xxl bold\"\u003eReserved\u003c/p\u003e\n\n        \u003cp className=\"body-text sans xs\"\u003ebody-text sans xs\u003c/p\u003e\n        \u003cp className=\"body-text sans s\"\u003ebody-text sans s\u003c/p\u003e\n        \u003cp className=\"body-text sans m\"\u003ebody-text sans m\u003c/p\u003e\n        \u003cp className=\"body-text sans l\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text sans xl\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text sans xxl\"\u003eReserved\u003c/p\u003e\n\n        \u003cp className=\"body-text sans xs bold\"\u003e\n            body-text sans xs bold\n        \u003c/p\u003e\n        \u003cp className=\"body-text sans s bold\"\u003e\n            body-text sans s bold\n        \u003c/p\u003e\n        \u003cp className=\"body-text sans m bold\"\u003e\n            body-text sans m bold\n        \u003c/p\u003e\n        \u003cp className=\"body-text sans l bold\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text sans xl bold\"\u003eReserved\u003c/p\u003e\n        \u003cp className=\"body-text sans xxl bold\"\u003eReserved\u003c/p\u003e\n\n    );\n}\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdmediagroep%2Ffd-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffdmediagroep%2Ffd-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffdmediagroep%2Ffd-design-system/lists"}