FAQ

Excellent and often asked questions

This is a description of the subject matter related to the title of this accordion, whether that be a statement/statements or, in the case of an FAQ, an answer to the question that has been asked.

This is a description of the subject matter related to the title of this accordion, whether that be a statement/statements or, in the case of an FAQ, an answer to the question that has been asked.

This is a description of the subject matter related to the title of this accordion, whether that be a statement/statements or, in the case of an FAQ, an answer to the question that has been asked.

Excellent and often asked questions

This is a description of the subject matter related to the title of this accordion, whether that be a statement/statements or, in the case of an FAQ, an answer to the question that has been asked.

This is a description of the subject matter related to the title of this accordion, whether that be a statement/statements or, in the case of an FAQ, an answer to the question that has been asked.

This is a description of the subject matter related to the title of this accordion, whether that be a statement/statements or, in the case of an FAQ, an answer to the question that has been asked.

Pattern Documentation

Theme Modifiers (CSS, Javascript)

This pattern styling is affected by modifiers; see the Kadence Build Strategy Documentation.

Here are the classes that affect this pattern:

  • accordion:
    • Added to Accordion block
    • Applies styles for border, spacing and icon trigger to match design where block controls did not cover everything needed
  • is-dark:
    • Added to Accordion block
    • Handles changing icon trigger border and background color to match the color scheme

Kadence Modification Notes

  • Container block
    • Renamed “FAQ Dark/Light”
    • Padding top/bottom set w/ manually entered px values:
      • Desktop 5XL
      • Tablet 104px
      • Mobile 80px
  • Heading Block
    • Font size set w/ manually entered px values: 118px (desktop), 80px (tablet), 58px (mobile)
    • Font-weight: 500
    • Line-height: 1.1
    • Letter-spacing: -3.54px (desktop), -0.58px (mobile)
  • Accordion Block:
    • Trigger Icon: Color may be changed, but otherwise do not adjust these block settings as trigger icon is set within codebase styles
    • Panel Title:
      • Font-size: 29px
      • Line-height: 1.2
      • Font-weight: 500
      • Letter-spacing: 0.2
      • Padding: LG (top), None (right), SM (bottom), None (left)
    • Inner Content Padding: None (top/right/left), MD (bottom)

Pattern Library Organization

  • Categories: Accordions
  • Search Keywords: accordion, faq