FAQ

Use .faq element to style elements related to the faq module.

Structurally .faq contains following elements:

• .faq__heading
• .faq__content
• .faq__item
• .faq__item-question
• .faq__item-question-number
• .faq__item-question-header
• .faq__item-answer

It also contains following class modifiers:

• .faq__item-question-icon_collapsed
• .faq__item-question-icon_expanded

Example

Here is an example of faq element usage.

HTML

<section class="faq">
    <div class="faq__heading">
        <h2 class="header header_h2 header_underline faq__heading-title">
            <span class="header_highlight">Module header</span>
        </h2>
        <p class="faq__heading-description">Module description</p>
    </div>

    <div class="faq__content">
        <h-accordion mode="single">
            <h-accordion-group class="faq__item" opened>
                <h-accordion-toggler class="faq__item-question accordion__toggler">
                    <h3 class="faq__item-question-header">Question content</h3>    
                    <svg class="icon icon_l faq__item-question-icon_expanded accordion__toggler-icon" aria-hidden="true">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
                    </svg>                        
                </h-accordion-toggler>
                <h-accordion-content class="faq__item-answer accordion-toggle-transition-end">
                    Answer content       
                </h-accordion-content>
            </h-accordion-group>                                                        

            <h-accordion-group class="faq__item">
                <h-accordion-toggler class="faq__item-question accordion__toggler">
                    <h3 class="faq__item-question-header">Question content</h3>
                    <svg class="icon icon_l faq__item-question-icon_collapsed accordion__toggler-icon" aria-hidden="true">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-up"></use>
                    </svg>
                </h-accordion-toggler>
                <h-accordion-content class="faq__item-answer accordion-toggle-transition-start" hidden>
                    Answer content       
                </h-accordion-content>
            </h-accordion-group>
        </h-accordion>
    </div>
</section>

LESS

You can modify any faq less variable in your User Less section to change faq styles.

FAQ variables

Variables used to style faq.

@faqHeadingMarginBlock: @globalSpacing / 2;
@faqHeadingPaddingTop: @globalSpacing;
@faqHeadingPaddingBottom: @globalSpacing / 2;

@faqContentMaxWidth: 976px;

@faqItemBorder: 1px solid @neutralColors100;
@faqItemPaddingBlock: @globalSpacing;

If you want to change faq styles, you can just change the variables. To change a default max-width for the faq content container just modify @faqContentMaxWidth variable.

@faqContentMaxWidth: 1400px;

FAQ standard styles

Here are standard faq styles.

.faq {
    &__heading {
        margin-block-end: @faqHeadingMarginBlock;
        .header {
            margin-block-end: 0;
        }

        &-description {
            .size-s();
            max-width: @faqContentMaxWidth;
            padding-block: @faqHeadingPaddingTop @faqHeadingPaddingBottom;
            margin-inline: auto;
        }
    }
    &__content {
        max-width: @faqContentMaxWidth;
        margin-inline: auto;
    }
    &__item {
        display: block;
        &:not(:last-child) {
            border-block-end: @faqItemBorder;
        }

        .faq__item-question-icon_expanded {
            display: inline-block;
        }
        .faq__item-question-icon_collapsed {
            display: none;
        }
        &[opened] {
            .faq__item-question-icon_expanded {
                display: none;
            }
            .faq__item-question-icon_collapsed {
                display: inline-block;
            }
        }

        &-question {
            padding-block: @faqItemPaddingBlock;
            &-header {
                .weight-semibold();
            }
            &[aria-expanded='true'] {
                .accordion__toggler-icon {
                    transform: none;
                }
            }
        }
        &-answer {
            .size-s();
            padding-block-end: @faqItemPaddingBlock;
        }
    }
}

Modules reference

• FAQ
• accordion