Copy environment

Faq 

<div class="content-section content-section--inset content-section--sticky faq">
    <div class="content-section__title text-button">frequently asked questions</div>
    <div class="content-section__content">

        <div class="accordion js-accordion-group  faq__accordion">
            <div class="accordion__item js-accordion is-open" id="accordion-item-1">
                <a href="#accordion-item-1" class="accordion__header js-accordion-control">
                    <div class="accordion__title">How Letters from Tartu works? <svg class="icon  accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
                        </svg>
                        <svg class="icon accordion__header-icon--collapse accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
                        </svg>
                    </div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion " id="accordion-item-2">
                <a href="#accordion-item-2" class="accordion__header js-accordion-control">
                    <div class="accordion__title">How can I use Letters from Tartu fonts? <svg class="icon  accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
                        </svg>
                        <svg class="icon accordion__header-icon--collapse accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
                        </svg>
                    </div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion " id="accordion-item-3">
                <a href="#accordion-item-3" class="accordion__header js-accordion-control">
                    <div class="accordion__title">How often are new fonts uploaded? <svg class="icon  accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
                        </svg>
                        <svg class="icon accordion__header-icon--collapse accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
                        </svg>
                    </div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
                    </div>
                </div>
            </div>
            <div class="accordion__item js-accordion " id="accordion-item-4">
                <a href="#accordion-item-4" class="accordion__header js-accordion-control">
                    <div class="accordion__title">Can we work together? <svg class="icon  accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
                        </svg>
                        <svg class="icon accordion__header-icon--collapse accordion__header-icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
                        </svg>
                    </div>
                </a>
                <div class="accordion__content js-accordion-content">
                    <div class="accordion__inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
 
{% set content %}
    {% include '@accordion' with {class: "faq__accordion", data: data.questions} %}
{% endset %}

{% include '@content-section' with {class: "faq", modifier: 'content-section--inset content-section--sticky', data: {title: data.title, content: content}} %}

{
  "language": "en-US",
  "data": {
    "title": "frequently asked questions",
    "questions": {
      "items": [
        {
          "id": "accordion-item-1",
          "title": "How Letters from Tartu works?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
        },
        {
          "id": "accordion-item-2",
          "title": "How can I use Letters from Tartu fonts?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
        },
        {
          "id": "accordion-item-3",
          "title": "How often are new fonts uploaded?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
        },
        {
          "id": "accordion-item-4",
          "title": "Can we work together?",
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
        }
      ]
    }
  }
}
  • Content: 
    .faq__accordion {
    margin: 46px 0;

    @include bp(sm-min) {
        margin: 96px 0;
    }
}
  • URL: /components/raw/faq/faq.scss
  • Filesystem Path: src/patterns/modules/faq/faq.scss
  • Size: 97 Bytes