Skip to content

FAQ13.10.5

The FAQ module is meant to give the user quick access to information that might be common for users to wonder on that specific page


$ npm i @if-design-system/faq@13.10.5

Vem gäller hemförsäkringen för?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Måste man ha hemförsäkring?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Gäller försäkringen för lånade saker?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Måste man ha hemförsäkring?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Edit this section

Overview

There is currently no documentation for this section yet.
Contact the Design System team for questions.

If you want to contribute, you can also add the documentation yourself!

Edit this section

Usage

The FAQ module is meant to give the user quick access to information that might be common for users to wonder on that specific page. Since the module is quite small, it can be placed where deemed necessary, especially where we previously have used expandable components before.

Maximum number of rows on the module is set to 8 due to usability of the component.

Do not put excessive text in the component as its meant to quickly give user the answer, try to keep information in the FAQ to maximum 4-5 lines. If not possible its better to include a link to the page where the user can read the full information.

On backgrounds

To be used on BE 5, LIGHTEST BEIGE - BE 3, LIGHT BEIGE, only for text and link content, no length restriction for now.

Do not use the FAQ Component on BE 1, DARK BEIGE
Do not use the FAQ Component on BE 2, BEIGE

Principles

Sizing

The FAQ Component width is set in the default grid columns, depending on breakpoints:

Breakpoint Columns
Up to 960px/60rem/Small 12
960px/60rem/Small 11
1440px/90rem/Large 10
1920px/120rem/Extra Large 9
Edit this section

Behaviours

Interactions

Toggle

Vem gäller hemförsäkringen för?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Closed
Vem gäller hemförsäkringen för?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Open

The question is bolded when it is open.

Focus

Vem gäller hemförsäkringen för?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Keyboard focus

3px outline with 1px offset and color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Hover

Vem gäller hemförsäkringen för?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Hovered

The question get an underline and the text color is BL 1, BLUE.

Edit this section

Accessibility

Keyboard navigation

Key Function
Space or Enter When focus is on the question of a collapsed answer, expands the answer.
Tab
  • Moves focus to the next focusable element.
  • All focusable elements in the FAQ are included in the page Tab sequence.
Shift + Tab
  • Moves focus to the previous focusable element.
  • All focusable elements in the FAQ are included in the page Tab sequence.
Down Arrow
  • When focus is on an question, moves focus to the next question.
  • When focus is on last question, moves focus to first question.
Up Arrow
  • When focus is on an question, moves focus to the previous question.
  • When focus is on first question, moves focus to last question.
Home When focus is on an question, moves focus to the first question.
End When focus is on an question, moves focus to the last question.
Edit this section

Anatomy

Vem gäller hemförsäkringen för?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Måste man ha hemförsäkring?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Gäller försäkringen för lånade saker?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Måste man ha hemförsäkring?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

  1. Question
  2. Answer
  3. Closed question
Edit this section

Specs

Vem gäller hemförsäkringen för?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Måste man ha hemförsäkring?

Har du lånat utrustning från skolan som dator, läsplatta, musikinstrument gäller även allriskförsäkringen Otur för dessa, men i övriga fall är lånad egendom undantagen från allriskförsäkringen.

Edit this section

Code

Markup

<div class="if faqs">
  <details class="if faq">
    <summary class="if question">Vem gäller hemförsäkringen för?</summary>
    <div class="if answer">
      <content>
    </div>
  </details>
  <details class="if faq"></details></div>

JavaScript Library

JavaScript support library for the FAQ Component.

This component is compatible with CommonJS, ESM (ES6 module) and UMD. See documentation examples below.

Install

$ npm install @if-design-system/faq-js

Or for Yarn:

$ yarn add @if-design-system/faq-js

Init

To initialize follow these steps:

Add markup

Add required markup as depicted under Markup.

Add JavaScript
By script tag
<script src="/faq.js"></script>
<script>
  window.faq.default();
</script>
As an ES6 module
import faq from '@if-design-system/faq-js';

faq.default();

Webcomponent

The webcomponent is fully scoped, and uses shadow DOM.

Install

$ npm install @if-design-system/faq-webcomponent

Or for Yarn:

$ yarn add @if-design-system/faq-webcomponent

Usage

<ids-faq>
  <details [open]>
    <summary>Vem gäller hemförsäkringen för?</summary>
    <div></div>
  </details></ids-faq>
<script src="…faq-webcomponent.umd.js"></script>
Edit this section

Contact us