Norsk Tipping Design System

Accordion

Install

yarn add @ntds/accordion

Import

import { Accordion } from '@ntds/accordion';

Usage

<Accordion tw={{ sizing: 'max-w-sm' }}>
    <Accordion.Item
        headingLevel={2}
        title='Mine Spill'
        twDetails={{ margin: 'm-0', padding: 'p-0' }}
        details={() => (
            <Accordion.LinkList>
                <Accordion.Link
                    render={props => <button {...props} onClick={() => { alert('Hello!'); }} />}
                >
                    Jeg vil redigere en gammel kupong før den leveres pÄ nytt
                </Accordion.Link>
                <Accordion.Link
                    render={props => <button {...props} onClick={() => { alert('Hello!'); }} />}
                >
                    Hvorfor har dere fjernet funksjonalitet fra Mine spill?
                </Accordion.Link>
            </Accordion.LinkList>
        )}
    />
</Accordion>

Props

PropTypeDefaultDescription
childrenReactNode—Usually simple text, but can be anything.
large?boolean—larger text

On this page