Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/fdmediagroep/fd-design-system

FD Design System
https://github.com/fdmediagroep/fd-design-system

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

Last synced: 8 days ago
JSON representation

FD Design System

Awesome Lists containing this project

README 

        
> :exclamation: **DEPRECATED** :exclamation: : Sunsetting.





    

        FD Design System

    






    

        Build

    

    

        Publish

    

    

        Code Quality

    

    

        Test coverage

    

    

        NPM version

    

    

        Bundle-size minified+gzip

    




# FD Design System



[Design System](https://design-system.fd.nl) for components used by [FD.nl](https://fd.nl).



The Design System is created to be used in the following ways:



-   **Component Library**

    -   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).

-   **Design Documentation**

    -   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.

-   **CSS + HTML code generator**

    -   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.



## Installation



Install the `Design System` as dependency for your project:



-   NPMJS: `npm i @fdmg/design-system`



or



-   GitHub Packages: `https://github.com/FDMediagroep/fd-design-system/packages`



## TypeScript support



TypeDefinitions are available and included.



## Getting started



These are the only steps you need to follow in order to use our components.



1. Import our CSS style(s)

    - It's possible to omit this and use your own styles instead.

    - You can choose to import all styles or styles for each component individually (as shown in the code examples for each component).

1. Import and implement our component(s).

    - 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.



Example code are listed [below](#components).



## Components



**Global CSS:**



```

import "@fdmg/design-system/main.css";

```



Contains all the CSS for all the components. It's possible to only include the CSS for each component separately.

The individual imports are shown in the code examples.



**Main component module:**



```

import { ...component... } from "@fdmg/design-system";

```



The 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.



The reason we publish the library as CommonJS module is because the Webpack build allows for the generation of separate

CSS modules and CommonJS modules for each component. This allows you to only import the JS and CSS for the module that you actually use.

When 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.



So 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.



**React:**



```

import React from 'react';

```



All components import React even though the example codes don't reflect that.



---



### Article



ArticleMeta



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-meta/ArticleMeta.css";

```



```

import { ArticleMeta } from "@fdmg/design-system/components/input/ArticleMeta";



function Foo() {

    return (

        

    );

}

```



ArticleImage



[Demo](https://design-system.fd.nl/article-image)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-image/ArticleImage.css";

```



```

import { ArticleImage } from "@fdmg/design-system/components/article-image/ArticleImage";



function Foo() {

    return (

        

    );

}

```



ArticleTags



[Demo](https://design-system.fd.nl/article-tags)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-tags/ArticleTags.css";

```



```

import { ArticleTags } from "@fdmg/design-system/components/article-tags/ArticleTags";



function Foo() {

    return (

         {}}

            onEnableAlertClick={() => {}}

            onFollowClick={() => {}}

            onUnfollowClick={() => {}}

            title="Volgen via mijn nieuws"

            titleLink="https://fd.nl/mijn-nieuws"

            tags={[

                {

                    tag: 'Detailhandel',

                    uuid: '1',

                },

                {

                    selected: true,

                    tag: 'Eten & Drinken',

                    uuid: '2',

                },

                {

                    alertSelected: true,

                    selected: true,

                    tag: 'Supermarkt',

                    uuid: '3',

                },

            ]}

        />

    );

}

```



BulletPoint



[Demo](https://design-system.fd.nl/article-bullet-point)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/bullet-point/BulletPoint.css";

```



```

import { BulletPoint } from "@fdmg/design-system/components/bullet-point/BulletPoint";



function Foo() {

    return (

        

    );

}

```



Financial Agenda



[Demo](https://design-system.fd.nl/financial-agenda)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/financial-agenda/FinancialAgenda.css";

```



```

import { FinancialAgenda } from "@fdmg/design-system/components/financial-agenda/FinancialAgenda";



function Foo() {

    return (

        

    );

}

```



Infographic



[Demo](https://design-system.fd.nl/article-infographic)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/infographic/Infographic.css";

```



```

import { Infographic } from "@fdmg/design-system/components/infographic/Infographic";



function Foo() {

    return (

        

    );

}

```



Latest News (article)



[Demo](https://design-system.fd.nl/article-latest-news)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-latest-news/ArticlelatestNews.css";

```



```

import { ArticleLatestNews } from "@fdmg/design-system/components/article-latest-news/ArticleLatestNews";



function Foo() {

    return (

        

    );

}

```



LinkBlock



[Demo](https://design-system.fd.nl/article-link-block)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-link-block/LinkBlock.css";

```



```

import { LinkBlock } from "@fdmg/design-system/components/article-link-block/LinkBlock";



function Foo() {

    return (

        

    );

}

```



LinkCard



[Demo](https://design-system.fd.nl/article-link-card)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-link-card/LinkCard.css";

```



```

import { LinkCard as ArticleLinkCard } from "@fdmg/design-system/components/article-link-card/LinkCard";



function Foo() {

    return (

        

    );

}

```



NumberFrame



[Demo](https://design-system.fd.nl/numberframe)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/numberframe/NumberFrame.css";

```



```

import { NumberFrame } from "@fdmg/design-system/components/numberframe/NumberFrame";



function Foo() {

    return (

        

    );

}

```



Quote



[Demo](https://design-system.fd.nl/quote)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/quote/Quote.css";

```



```

import { Quote } from "@fdmg/design-system/components/quote/Quote";



function Foo() {

    return (

        

    );

}

```



ReadMore



[Demo](https://design-system.fd.nl/readmore)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/readmore/ReadMore.css";

```



```

import { ReadMore } from "@fdmg/design-system/components/readmore/ReadMore";



function Foo() {

    return (

        link`,

                `Another link`

            ]

        />

    );

}

```



RelatedTopics



[Demo](https://design-system.fd.nl/article-related-topics)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-related-topics/RelatedTopics.css";

```



```

import { RelatedTopics } from "@fdmg/design-system/components/article-related-topics/RelatedTopics";



function Foo() {

    return (

         {},

                selected: false,

            },

            {

                topic: 'Topic 2',

                href: '/tag/topic2',

                selected: true,

                onClick: () => {},

            },

            {

                topic: 'Topic 3',

                href: '/tag/topic3',

                selected: false,

                onClick: () => {},

            }]}/>

    );

}

```



Summary



[Demo](https://design-system.fd.nl/article-summary)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/article-summary/Summary.css";

```



```

import { Summary } from "@fdmg/design-system/components/article-summary/Summary";



function Foo() {

    return (

        

    );

}

```



TextFrame



[Demo](https://design-system.fd.nl/textframe)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/textframe/TextFrame.css";

```



```

import { TextFrame } from "@fdmg/design-system/components/textframe/TextFrame";



function Foo() {

    return (

        

    );

}

```



Toolbar horizontal



[Demo](https://design-system.fd.nl/toolbar/horizontal)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/toolbar/HorizontalToolbar.css";

```



```

import { HorizontalToolbar } from "@fdmg/design-system/components/toolbar/HorizontalToolbar";



function Foo() {

    return (

        

    );

}

```



Toolbar vertical



[Demo](https://design-system.fd.nl/toolbar/vertical)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/toolbar/VerticalToolbar.css";

```



```

import { VerticalToolbar } from "@fdmg/design-system/components/toolbar/VerticalToolbar";



function Foo() {

    return (

        

    );

}

```



Vimeo



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/vimeo/Vimeo.css";

```



```

import { Vimeo } from "@fdmg/design-system/components/vimeo/Vimeo";



function Foo() {

    return (

        

    );

}

```



WordFrame



[Demo](https://design-system.fd.nl/wordframe)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/wordframe/WordFrame.css";

```



```

import { WordFrame } from "@fdmg/design-system/components/wordframe/WordFrame";



function Foo() {

    return (

        

    );

}

```



Youtube



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/youtube/Youtube.css";

```



```

import { Youtube } from "@fdmg/design-system/components/youtube/Youtube";



function Foo() {

    return (

        

    );

}

```



### Controls



Breaking Switch



[Demo](https://design-system.fd.nl/input/breaking-switch)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/BreakingSwitch.css";

```



```

import { BreakingSwitch } from "@fdmg/design-system/components/input/BreakingSwitch";



interface Props {

    checked?: boolean;

}



function Foo(props: Props) {

    const [checked, setChecked] = useState(props.checked);



    function handleChange(e: React.ChangeEvent) {

        setChecked(e.currentTarget.checked);

    }



    return (

        

    );

}

```



Button



[Demo](https://design-system.fd.nl/button/button)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/button/Button.css";

```



```

import { Button } from "@fdmg/design-system/components/button/Button";



function Foo() {

    function handleClick() {

        console.log('clicked');

    }



    return (

        Click me!

    );

}

```



Button CTA (call-to-action)



[Demo](https://design-system.fd.nl/button/cta)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/button/ButtonCta.css";

```



```

import { ButtonCta } from "@fdmg/design-system/components/button/ButtonCta";



function Foo() {

    function handleClick() {

        console.log('clicked');

    }



    return (

        Click me!

    );

}

```



Button Follow



[Demo](https://design-system.fd.nl/button/follow)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/button/ButtonFollow.css";

```



```

import { useState } from 'react';

import { ButtonFollow } from "@fdmg/design-system/components/button/ButtonFollow";



function Foo() {

    const [follow, setFollow] = useState(false);

    function handleClick() {

        console.log('clicked');

        setFollow(!follow);

    }



    return (

        Click me!

    );

}

```



Ghost Button



[Demo](https://design-system.fd.nl/button/ghost)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/button/ButtonGhost.css";

```



```

import { ButtonGhost } from "@fdmg/design-system/components/button/ButtonGhost";



function Foo() {

    function handleClick() {

        console.log('clicked');

    }



    return (

        Click me!

    );

}

```



Checkbox



[Demo](https://design-system.fd.nl/input/checkbox)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/Checkbox.css";

```



```

import { Checkbox } from "@fdmg/design-system/components/input/Checkbox";



function Foo() {

    return (

        

    );

}

```



Dropdown



[Demo](https://design-system.fd.nl/button/dropdown)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/button/Dropdown.css";

```



```

import { Dropdown } from "@fdmg/design-system/components/button/Dropdown";



function Foo() {

    const [expanded, setExpanded] = useState(false);

    function handleClick() {

        console.log('toggle!');

        setExpanded((expanded) => !expanded)

    }



    return (

        Click me!

    );

}

```



Date input



[Demo](https://design-system.fd.nl/input/dateinput)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/TextInput.css";

```



```

import { TextInput } from "@fdmg/design-system/components/input/TextInput";



function Foo() {

    return (

        

    );

}

```



Email input



[Demo](https://design-system.fd.nl/input/emailinput)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/TextInput.css";

```



```

import { TextInput, Patterns } from "@fdmg/design-system/components/input/TextInput";



function Foo() {

    return (

        

    );

}

```



Mobile input (tel)



[Demo](https://design-system.fd.nl/input/mobileinput)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/TextInput.css";

```



```

import { TextInput, Patterns } from "@fdmg/design-system/components/input/TextInput";



function Foo() {

    return (

        

    );

}

```



Radio



[Demo](https://design-system.fd.nl/input/radio)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/Radio.css";

```



```

import { Radio } from "@fdmg/design-system/components/input/Radio";



function Foo() {

    return (

        <>

            

            

        >

    );

}

```



Select



[Demo](https://design-system.fd.nl/input/select)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/Select.css";

```



```

import { Select } from "@fdmg/design-system/components/input/Select";



function Foo() {

    return (

        

            -- aanhef --

            Dhr.

            Mevr.

            Mw.

            Drs.

            Prof.

        

    );

}

```



Switch



[Demo](https://design-system.fd.nl/input/switch)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/Switch.css";

```



```

import { Switch } from "@fdmg/design-system/components/input/Switch";



function Foo() {

    return (

        

    );

}

```



TextArea



[Demo](https://design-system.fd.nl/input/textarea)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/TextArea.css";

```



```

import { TextArea } from "@fdmg/design-system/components/input/TextArea";



function Foo() {

    return (

        

    );

}

```



Text input



[Demo](https://design-system.fd.nl/input/textinput)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/input/TextInput.css";

```



```

import { TextInput } from "@fdmg/design-system/components/input/TextInput";



function Foo() {

    return (

        

    );

}

```



### Cards



Horizontal Card 1



[Demo](https://design-system.fd.nl/card/horizontal-1)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/HorizontalCard1.css";

```



```

import { HorizontalCard1 } from "@fdmg/design-system/components/card/HorizontalCard1";



function Foo() {

    return (

        

    );

}

```



Horizontal Card 2



[Demo](https://design-system.fd.nl/card/horizontal-2)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/HorizontalCard2.css";

```



```

import { HorizontalCard2 } from "@fdmg/design-system/components/card/HorizontalCard2";



function Foo() {

    return (

        

    );

}

```



Horizontal Card 4



[Demo](https://design-system.fd.nl/card/horizontal-4)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/HorizontalCard4.css";

import "@fdmg/design-system/components/utils/image/FdImgix";

```



```

import { HorizontalCard4 } from "@fdmg/design-system/components/card/HorizontalCard4";

import { FdImgix } from '@fdmg/design-system/components/utils/image/FdImgix';



function Foo() {

    return (

        

            }

            id="1343052a"

            url="https://fd.nl/futures/1343052/levensgevaarlijk-libanon"

            label="Omgekeerde kruistocht"

            time="13:11"

            title="Levensgevaarlijk Libanon"

            intro="Ondanks een op het eerste gezicht veel gevaarlijker levensstijl, verschilt de levensverwachting van Libanezen nog maar drie jaar met die van ons."

        />

    );

}

```



Hybrid Card 1



[Demo](https://design-system.fd.nl/card/hybrid-1)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/HybridCard1.css";

```



```

import { HybridCard1 } from "@fdmg/design-system/components/card/HybridCard1";



function Foo() {



    function handleBookmark(e) {

        console.log(e);

    }



    return (

        

    );

}

```



Hybrid Card 2



[Demo](https://design-system.fd.nl/card/hybrid-2)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/HybridCard2.css";

```



```

import { HybridCard2 } from "@fdmg/design-system/components/card/HybridCard2";



function Foo() {



    function handleBookmark(e) {

        console.log(e);

    }



    return (

        

    );

}

```



Hybrid Card 4



[Demo](https://design-system.fd.nl/card/hybrid-4)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/HybridCard4.css";

import "@fdmg/design-system/components/utils/image/FdImgix.css";

```



```

import { HybridCard4 } from "@fdmg/design-system/components/card/HybridCard4";

import { FdImgix } from '@fdmg/design-system/components/utils/image/FdImgix';



function Foo() {

    return (

        

            }

        />

    );

}

```



LinkCard



[Demo](https://design-system.fd.nl/card/link-card)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/LinkCard.css";

```



```

import { LinkCard } from "@fdmg/design-system/components/card/LinkCard";



function Foo() {

    return (

        

    );

}

```



Vertical Card 1



[Demo](https://design-system.fd.nl/card/vertical-1)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/VerticalCard1.css";

```



```

import { VerticalCard1 } from "@fdmg/design-system/components/card/VerticalCard1";



function Foo() {



    function handleBookmark(e) {

        console.log(e);

    }



    return (

        

    );

}

```



Vertical Card 5



[Demo](https://design-system.fd.nl/card/vertical-5)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/VerticalCard5.css";

```



```

import { VerticalCard5 } from "@fdmg/design-system/components/card/VerticalCard5";



function Foo() {

    return (

        

    );

}

```



Vertical Card 6



[Demo](https://design-system.fd.nl/card/vertical-6)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/card/VerticalCard6.css";

import "@fdmg/design-system/components/utils/image/FdImgix.css";

```



```

import { VerticalCard6 } from "@fdmg/design-system/components/card/VerticalCard6";

import { FdImgix } from "@fdmg/design-system/components/utils/image/FdImgix";



function Foo() {

    return (

        

            }

            id="1345422"

            label="Arbeidsmarkt"

            title="Lockdown leidt tot recordstijging aantal WW-uitkeringen in april"

            url="https://fd.nl/economie-politiek/1345422/lockdown-leidt-tot-recordstijging-aantal-ww-uitkeringen-in-april"

        />

    );

}

```



### Misc.



A/B Testing component



[Demo](https://design-system.fd.nl/ab)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/ab/ab.css"; // For debug options layout

```



```

import { Experiment, Variant, ABProvider } from "@fdmg/design-system/components/ab/ab";



function Foo() {

    return (

        

            

                

                    
Headline 1


                

                

                    
Headline 2


                

            

        

    );

}

```



Accordion



[Demo](https://design-system.fd.nl/accordion)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/accordion/Accordion.css";

```



```

import { Accordion } from '@fdmg/design-system/components/accordion/Accordion';



function Foo() {

    return (

        description,

            },

        ]} />

    );

}

```



AuthorInfo



[Demo](https://design-system.fd.nl/author-info)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/author-info/AuthorInfo.css";

```



```

import { AuthorInfo } from '@fdmg/design-system/components/author-info/AuthorInfo';



function Foo() {

    return (

        

                    Nelleke Trappenburg schrijft bij het FD over pensioenen:

                    dekkingsgraden, beleggingskosten, nieuwe wetgeving etc.

                    Eerder werkte zij onder meer op de beursredactie.

                

            }

            imageUrl="https://images.fd.nl/ffa583e0c7fbc666934ecc326a88defc2773f4e9.jpeg?fit=crop&crop=faces&auto=format&q=45&cs=tinysrgb&w=640&h=640&fm=jpg"

            title="Nelleke Trappenburg"

            followed={mode === 'dark'}

            onEmailClick={() => {}}

            onFollowAuthorClick={() => {}}

            onLinkedInClick={() => {}}

            onTwitterClick={() => {}}

        />

    );

}

```



CookieConsent



[Demo](https://design-system.fd.nl/cookieconsent#cookie-consent)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/cookieconsent/CookieConsent.css";

```



```

import { CookieConsent } from '@fdmg/design-system/components/cookieconsent/CookieConsent';



function Foo() {

    return (

        

                    


                        FD Mediagroep (FDMG) en de daarbij horende

                        website: FD.nl en door haar geselecteerde

                        Partners hebben toegang tot uw gegevens en

                        gebruiken deze informatie voor de onderstaande

                        doeleinden. Klik op een doel om uw voorkeuren

                        aan te passen en om meer te weten te komen over

                        wie er om uw toestemming vraagt en/of rechtmatig

                        belang claimt om uw gegevens voor dat doel te

                        verwerken. Houd er rekening mee dat wanneer alle

                        doeleinden zijn geweigerd, dit een negatief

                        effect op bepaalde functies van de website kan

                        hebben.

                    


                    


                        Voor sommige doeleinden kunnen jouw

                        persoonsgegevens worden verwerkt op de

                        juridische grond van rechtmatig belang

                    


                >

            }

            title={

                

                    
Cookies


                

            }

            opened={true}

            onClose={() => {}}

        />

    );

}

```



LockedContent



[Demo](https://design-system.fd.nl/cookieconsent#locked-content)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/cookieconsent/CookieConsent.css";

```



```

import { LockedContent } from '@fdmg/design-system/components/cookieconsent/CookieConsent';



function Foo() {

    return (

        

                    In verband met de door u gekozen

                    cookievoorkeuren kunnen wij deze Youtube-video

                    niet tonen. Klik hier om akkoord te gaan met de

                    cookievoorkeuren die nodig zijn om deze

                    Youtube-video te laden.

                

            }

        >

            


                

            


        

    );

}

```



Grid



The CSS Grid is an external component and can be found here:

[Demo](https://design-system.fd.nl/grid)

[Source](https://github.com/FDMediagroep/fdmg-css-grid)



Modal



[Demo](https://design-system.fd.nl/modal)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/modal/Modal.css";

```



```

import { Modal } from '@fdmg/design-system/components/modal/Modal';



function Foo() {

    return (

         {}}>

            

                
Abonnement wijzigen of opzeggen


                


                    Voor wijzigingen kunt u elk moment bellen. Voor

                    opzeggen geeft u dit uiterlijk 1 maand voor het

                    einde van de abonnements- of actieperiode

                    telefonisch door aan Klantenservice

                


                


                    0800 666 6667{' '}

                    (gratis, ma t/m vr 07.30 - 18.00 uur en za 07.30 -

                    11.30 uur).

                


                


                    Ook kijken we graag samen met u naar een

                    abonnementsvorm die wellicht beter bij u past.

                


                Sluiten

            

        

    );

}

```



StockTicker



[Demo](https://design-system.fd.nl/stock-ticker)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

import "@fdmg/design-system/components/stockticker/StockTicker.css";

```



```

import { StockTicker } from "@fdmg/design-system/components/stockticker/StockTicker";



function Foo() {

    return (

        link`,

                `Another link`

            ]

        />

    );

}

```



Typography



[Demo](https://design-system.fd.nl/typography)



Component CSS:



```

import "@fdmg/design-system/components/design-tokens/design-tokens.css";

```



```

function Foo() {

    return (

        
Heading xs


        
Heading s


        
Heading m


        
Heading l


        
Heading xl


        
Heading xxl



        
Heading xs


        
Heading s


        
Heading m


        
Heading l


        
Heading xl


        
Heading xxl



        
body-text serif xs


        
body-text serif s


        
Reserved


        
Reserved


        
Reserved


        
Reserved



        


            body-text serif xs bold

        


        


            body-text serif s bold

        


        
Reserved


        
Reserved


        
Reserved


        
Reserved



        
body-text sans xs


        
body-text sans s


        
body-text sans m


        
Reserved


        
Reserved


        
Reserved



        


            body-text sans xs bold

        


        


            body-text sans s bold

        


        


            body-text sans m bold

        


        
Reserved


        
Reserved


        
Reserved



    );

}

```