Back to Panel-guidelines

CSS ComponentThe latest version of this package is: 16.0.28, Opens in new window

Expandable panels contain creation flows and allow lightweight editing of an element.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/panel@16.0.28

Table of Contents

Edit this section, Opens in new window

Usage

Remember to use the correct aria-tags/roles, I.E. aria-expanded, aria-controls, tabindex and role="region". Read more about it here.

Default

<div class="if panel is-expandable [is-open]">
    <div class="if title" aria-expanded="[true|false]" aria-controls="exp1" tabindex="0">
        Tips och råd
    </div>
    <div class="if content" role="region" id="exp1" tabindex="0">
        <button class="if button primary" type="button">A button</button>
    </div>
</div>

Selectable expandable

<div class="if panel is-expandable is-selectable">
    <input
        checked
        type="radio"
        id="selectable-expandables-radio-1"
        class="if radio-button"
        name="radios"
    />
    <label
        for="selectable-expandables-radio-1"
        class="if title"
        aria-controls="exp1"
        aria-expanded="false"
        tabindex="0"
        >Select me</label
    >
    <div class="if content" role="region" id="exp1">
        <button class="if button primary" type="button">A duc</button>
    </div>
</div>

Grouped panels/expandable

<div class="if panels">
    <div class="if panel is-expandable">
        <div class="if title" aria-expanded="false" aria-controls="exp-main-1" tabindex="0">
            Expelliarmus
        </div>
        <div class="if content" role="region" id="exp-main-1" tabindex="-1">
            <p class="if text lead center">
                Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar,
                byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
            </p>
            <p class="if text body center">
                En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller
                vattenskada eller att värmepannan går sönder. I villaförsäkringen ingår reseskydd
                och försäkring för de personliga saker du och familjen äger, hyr eller lånar.
                Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.
            </p>
            <div class="if input-wrapper center">
                <button type="button" class="if button primary large">
                    Jämför våra villaförsäkringar
                </button>
            </div>
        </div>
    </div>
    <div class="if panel is-expandable">
        <div class="if title" aria-expanded="false" aria-controls="exp-main-2" tabindex="0">
            Expelliarmus
        </div>
        <div class="if content" role="region" id="exp-main-2" tabindex="-1">
            <p class="if text lead center">
                Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar,
                byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
            </p>
            <p class="if text body center">
                En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller
                vattenskada eller att värmepannan går sönder. I villaförsäkringen ingår reseskydd
                och försäkring för de personliga saker du och familjen äger, hyr eller lånar.
                Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.
            </p>
            <div class="if input-wrapper center">
                <button type="button" class="if button primary large">
                    Jämför våra villaförsäkringar
                </button>
            </div>
        </div>
    </div>
    <div class="if panel is-expandable">
        <div class="if title" aria-expanded="false" aria-controls="exp-main-3" tabindex="0">
            Expelliarmus
        </div>
        <div class="if content" role="region" id="exp-main-3" tabindex="-1">
            <p class="if text lead center">
                Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar,
                byggnaderna och tomten. Försäkringen är en trygghet för dig som äger hus.
            </p>
            <p class="if text body center">
                En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand- eller
                vattenskada eller att värmepannan går sönder. I villaförsäkringen ingår reseskydd
                och försäkring för de personliga saker du och familjen äger, hyr eller lånar.
                Villaförsäkringen kan du köpa till villa, radhus eller kedjehus.
            </p>
            <div class="if input-wrapper center">
                <button type="button" class="if button primary large">
                    Jämför våra villaförsäkringar
                </button>
            </div>
        </div>
    </div>
</div>

If you want to group the panels/expandables (bring them closer together), wrap them with .if.panels:

With columns

Column 1
Column 2
Column 3
<div class="if panel">
    <div class="if title">
        <div class="if grid across">
            <div class="if row">
                <div class="if col-12--xs col-4--md">Column 1</div>
                <div class="if col-12--xs col-4--md">Column 2</div>
                <div class="if col-12--xs col-4--md">Column 3</div>
            </div>
        </div>
    </div>
</div>

Grouped

Column 1
Column 2
Column 3
Column 1
Column 3
Column 1
Column 3
<div class="if panels">
    <div class="if panel">
        <div class="if title">
            <div class="if grid across">
                <div class="if row">
                    <div class="if col-12--xs col-4--md">Column 1</div>
                    <div class="if col-12--xs col-4--md">Column 2</div>
                    <div class="if col-12--xs col-4--md">Column 3</div>
                </div>
            </div>
        </div>
    </div>
    <div class="if panel">
        <div class="if title">
            <div class="if grid across">
                <div class="if row">
                    <div class="if col-12--xs col-8--md">Column 1</div>
                    <div class="if col-12--xs col-4--md">Column 3</div>
                </div>
            </div>
        </div>
    </div>
    <div class="if panel">
        <div class="if title">
            <div class="if grid across">
                <div class="if row">
                    <div class="if col-12--xs col-8--md">Column 1</div>
                    <div class="if col-12--xs col-4--md">Column 3</div>
                </div>
            </div>
        </div>
    </div>
</div>

Expandable

<div class="if panel is-expandable is-open">
    <div aria-controls="exp-usage-1" aria-expanded="true" class="if title" tabindex="0">
        Tips och råd
    </div>
    <div class="if content" id="exp-usage-1" role="region">
        <button class="if button primary" type="button">Submit</button>
    </div>
</div>

Grouped expandable

<div class="if panels">
    <div class="if panel is-expandable is-open">
        <div aria-controls="exp-usage-1" aria-expanded="true" class="if title" tabindex="0">
            Tips och råd
        </div>
        <div class="if content" id="exp-usage-1" role="region">
            <button class="if button primary" type="button">Submit</button>
        </div>
    </div>
    <div class="if panel is-expandable">
        <div aria-controls="exp-usage-2" aria-expanded="false" class="if title" tabindex="0">
            Tips och råd
        </div>
        <div class="if content" id="exp-usage-2" role="region">
            <button class="if button primary" type="button">Submit</button>
        </div>
    </div>
    <div class="if panel is-expandable">
        <div aria-controls="exp-usage-3" aria-expanded="false" class="if title" tabindex="0">
            Tips och råd
        </div>
        <div class="if content" id="exp-usage-3" role="region">
            <button class="if button primary" type="button">Submit</button>
        </div>
    </div>
</div>

Selectable

<div class="if panel is-expandable is-selectable is-open">
    <input checked type="radio" id="exp-states-8" class="if radio-button" name="radios" />
    <label for="exp-states-8" class="if title" aria-controls="exp8" aria-expanded="false"
        >Select me</label
    >
    <div class="if content" role="region" id="exp8">
        <button class="if button primary" type="button">Submit</button>
    </div>
</div>
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

Panel tokens

Name Value Is aliased in
$ids-panel-content-display
flex
$ids-panel-content-position
relative
$ids-panel-content-width
100%
$ids-panel-content-align-items
flex-start
$ids-panel-content-flex-direction
column
$ids-panel-content-margin-bottom
2rem
$ids-panel-content-padding
2.5rem 0
$ids-panel-content-border-radius
0 0 0.75rem 0.75rem
$ids-panel-content-font-size
1.125rem
$ids-panel-content-line-height
1.75rem
$ids-panel-content-letter-spacing
normal
$ids-panel-content-transition
all 0.2s cubic-bezier(0.4, 0, 0.2, 1)
$ids-panel-expandable-title-hover-text-decoration
underline
$ids-panel-expandable-content-display
none
$ids-panel-expandable-content-padding
2.5rem 0
$ids-panel-expandable-content-border-radius
0 0 0.75rem 0.75rem
$ids-panel-expandable-is-open-title-border-radius
0.75rem 0.75rem 0 0
$ids-panel-expandable-is-open-icon-transform
translateY(-50%) rotate(180deg)
$ids-panel-expandable-is-open-content-display
block
$ids-panel-icon-position
absolute
$ids-panel-icon-top
50%
$ids-panel-icon-display
block
$ids-panel-icon-height
2rem
$ids-panel-icon-width
2rem
$ids-panel-icon-background-size
2rem 2rem
$ids-panel-icon-transform
translateY(-50%)
$ids-panel-icon-transition
all 0.2s cubic-bezier(0.4, 0, 0.2, 1)
$ids-panel-position
relative
$ids-panel-width
100%
$ids-panel-margin
2rem 0
$ids-panel-border-radius
0 0 0.75rem 0.75rem
$ids-panel-background-color
transparent
$ids-panel-transition
all 0.2s cubic-bezier(0.4, 0, 0.2, 1)
$ids-panel-is-selectable-margin-bottom
0
$ids-panel-is-selectable-title-margin-bottom
0
$ids-panel-is-selectable-icon-transform
translateY(-50%)
$ids-panel-title-display
flex
$ids-panel-title-position
relative
$ids-panel-title-align-items
center
$ids-panel-title-width
100%
$ids-panel-title-min-height
4.5rem
$ids-panel-title-padding
0.5rem 5.5rem 0.5rem 1.5rem
$ids-panel-title-border-radius
0.75rem
$ids-panel-title-font-size
1.125rem
$ids-panel-title-letter-spacing
normal
$ids-panel-title-line-height
1.75rem
$ids-panel-title-transition
all 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0s
$ids-panel-title-icon-transform
translate(1px, -50%)
$ids-panel-title-hover-icon-transform
translate(1rem, -50%)
$ids-panel-light-title-background-color-default
rgb(250, 249, 247)
$ids-panel-light-title-background-color-hover
rgb(232, 224, 217)
$ids-panel-light-content-background-color
rgb(250, 249, 247)
$ids-panel-light-child-background-color
rgb(246, 243, 240)
$ids-panel-light-is-open-title-background-color
rgb(232, 224, 217)
$ids-panel-dark-title-background-color-default
rgb(241, 236, 232)
$ids-panel-dark-title-background-color-hover
rgb(232, 224, 217)
$ids-panel-dark-content-background-color
rgb(241, 236, 232)
$ids-panel-dark-child-background-color
rgb(250, 249, 247)
$ids-panel-dark-is-open-title-background-color
rgb(232, 224, 217)
Edit this section, Opens in new window

Accessibility

To make the component accessible, you want to use the correct aria-*-attributes:

  • Use aria-controls to dictate which content the panel controls
  • Update aria-expanded when the panel is expanded
  • Use tabindex=0 if the whole row is clickable
<div class="if panel is-expandable is-open">
    <div aria-controls="exp-usage-1" aria-expanded="true" class="if title" tabindex="0">
        Tips och råd
    </div>
    <div class="if content" id="exp-usage-1" role="region">
        <button class="if button primary" type="button">Submit</button>
    </div>
</div>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

  • The panel component now has rounded corners - 12px and equal padding on all edges

of the panel content.

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.10.1 (2022-03-15)

Bug Fixes

  • 🐛 Add min-height & padding to panel title (e0acf01) . ✅ Closes: 526907

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core
  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
  • 🧨 Navigation structure has now changed. Please see release notes!
  • 🧨 The JavaScript for the Panel Component is now a separate package: @ids-js/panel

Documentation Updates

  • ✏️ Make variations tables more condensed (4344a3a)

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Split out CSS documentation and JS script (e42d0c4) , closes #467386

  • ✏️ Update links and change navigation structure (0bfd27d) , closes #490579

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.10.6 (2021-10-18)

Bug Fixes

  • 🐛 panel (099dc29) , closes #485655 . fix selectable panels radio-buttons focus border overflow

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

  • 🤖 Use node v14 (4009973)

bootstrap (d23e139)

  • 🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)

  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
  • 🧨 Footer is now renamed to Global Footer
  • 🧨 Expandable component is now renamed to Panel

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Code Refactoring

rebuild (7edb430)

Edit this section, Opens in new window
Contact us, Opens in new window