Component documentation

Basics

Components

Objects

Utilities

Accordion

Content 1

Content 2

<div class="c-accordion">
    <div class="c-accordion__item">
        <div class="c-accordion__item-header">
            <div class="c-toolbar">
                <div class="c-toolbar__left">
                    <div class="c-toolbar__item">
                        <button class="c-button c-button--borderless c-button--icon" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                    </svg>
                                </div>
                                <div class="u-sr-accessible">Chevron
                                </div>
                            </span>
                        </button>
                        <span class="c-accordion__item-title">Title 1</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-accordion__item-content">
            <p>Content 1</p>
        </div>
    </div>
    <div class="c-accordion__item">
        <div class="c-accordion__item-header">
            <div class="c-toolbar">
                <div class="c-toolbar__left">
                    <div class="c-toolbar__item">
                        <button class="c-button c-button--borderless c-button--icon" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                    </svg>
                                </div>
                                <div class="u-sr-accessible">Chevron
                                </div>
                            </span>
                        </button>
                        <span class="c-accordion__item-title">Title 2</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-accordion__item-content">
            <p>Content 2</p>
        </div>
    </div>
</div>

.c-accordion
    .c-accordion__item
        .c-accordion__item-header
            .c-toolbar
                .c-toolbar__left
                    .c-toolbar__item
                        +c-button({skin: 'borderless', layout: 'icon-only', icon: 'chevron-right'}) Chevron
                        span.c-accordion__item-title Title 1

        .c-accordion__item-content
            p Content 1

    .c-accordion__item
        .c-accordion__item-header
            .c-toolbar
                .c-toolbar__left
                    .c-toolbar__item
                        +c-button({skin: 'borderless', layout: 'icon-only', icon: 'chevron-right'}) Chevron
                        span.c-accordion__item-title Title 2

        .c-accordion__item-content
            p Content 2

Accordion action

Content 1

<div class="c-accordion">
    <div class="c-accordion__item">
        <div class="c-accordion__item-header">
            <div class="c-toolbar">
                <div class="c-toolbar__left">
                    <div class="c-toolbar__item">
                        <button class="c-button c-button--borderless c-button--icon" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-chevron-right  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                                    </svg>
                                </div>
                                <div class="u-sr-accessible">Chevron
                                </div>
                            </span>
                        </button>
                        <span class="c-accordion__item-title">Title 1</span>
                    </div>
                </div>
                <div class="c-toolbar__right">
                    <div class="c-toolbar__item">
                        <button class="c-button c-button--borderless c-button--icon" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-add  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                    </svg>
                                </div>
                                <div class="u-sr-accessible">
                                </div>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-accordion__item-content">
            <p>Content 1</p>
        </div>
    </div>
</div>

.c-accordion
    .c-accordion__item
        .c-accordion__item-header
            .c-toolbar
                .c-toolbar__left
                    .c-toolbar__item
                        +c-button({skin: 'borderless', layout: 'icon-only', icon: 'chevron-right'}) Chevron
                        span.c-accordion__item-title Title 1
                .c-toolbar__right
                    .c-toolbar__item
                        +c-button({skin: 'borderless', icon: 'add', layout: 'icon-only'})

        .c-accordion__item-content
            p Content 1