FAQs

<section
  class="site-section faq-section faq-centered"
  aria-labelledby="faq-centered-title"
>
  <header class="faq-intro">
    <h2 id="faq-centered-title">
      Frequently asked questions
    </h2>
    <p>
      Start here, or explore the
      <a class="link" href="/docs">
        documentation
      </a>
      .
    </p>
  </header>
  <div class="accordion accordion-plus">
    <details name="faq-centered" open>
      <summary>
        What do I need to get started?
      </summary>
      <p>
        Start with a page and an idea. Copy the HTML and include the required styles; there is no build step for standalone examples.
      </p>
    </details>
    <details name="faq-centered">
      <summary>
        Can I make it look like my brand?
      </summary>
      <p>
        Yes. Set your colors, type, and corner radius through the theme, then adjust the copy, spacing, and layout to suit your project.
      </p>
    </details>
    <details name="faq-centered">
      <summary>
        Will it work with my framework?
      </summary>
      <p>
        Use the standalone HTML or choose a framework example. Keep application state in your framework and bring in only the pieces you need.
      </p>
    </details>
    <details name="faq-centered">
      <summary>
        Does everything need JavaScript?
      </summary>
      <p>
        No. Layout and styling are CSS, and native elements handle interactions such as these disclosures. Some components add JavaScript for richer behavior.
      </p>
    </details>
    <details name="faq-centered">
      <summary>
        How does it work on smaller screens?
      </summary>
      <p>
        The layouts adapt to narrower screens. Check your own copy and images at mobile sizes, especially after changing the content or typography.
      </p>
    </details>
    <details name="faq-centered">
      <summary>
        Can I change the source?
      </summary>
      <p>
        Absolutely. The markup and styles are yours to adapt. Keep the accessible labels and keyboard behavior when making a design your own.
      </p>
    </details>
  </div>
</section>

<section
  class="site-section faq-section faq-split"
  aria-labelledby="faq-split-accordion-title"
>
  <header class="faq-intro">
    <h2 id="faq-split-accordion-title">
      Frequently asked questions
    </h2>
    <p>
      Start here, or explore the
      <a class="link" href="/docs">
        documentation
      </a>
      .
    </p>
  </header>
  <div class="accordion accordion-plus">
    <details name="faq-split-accordion" open>
      <summary>
        What do I need to get started?
      </summary>
      <p>
        Start with a page and an idea. Copy the HTML and include the required styles; there is no build step for standalone examples.
      </p>
    </details>
    <details name="faq-split-accordion">
      <summary>
        Can I make it look like my brand?
      </summary>
      <p>
        Yes. Set your colors, type, and corner radius through the theme, then adjust the copy, spacing, and layout to suit your project.
      </p>
    </details>
    <details name="faq-split-accordion">
      <summary>
        Will it work with my framework?
      </summary>
      <p>
        Use the standalone HTML or choose a framework example. Keep application state in your framework and bring in only the pieces you need.
      </p>
    </details>
    <details name="faq-split-accordion">
      <summary>
        Does everything need JavaScript?
      </summary>
      <p>
        No. Layout and styling are CSS, and native elements handle interactions such as these disclosures. Some components add JavaScript for richer behavior.
      </p>
    </details>
    <details name="faq-split-accordion">
      <summary>
        How does it work on smaller screens?
      </summary>
      <p>
        The layouts adapt to narrower screens. Check your own copy and images at mobile sizes, especially after changing the content or typography.
      </p>
    </details>
    <details name="faq-split-accordion">
      <summary>
        Can I change the source?
      </summary>
      <p>
        Absolutely. The markup and styles are yours to adapt. Keep the accessible labels and keyboard behavior when making a design your own.
      </p>
    </details>
  </div>
</section>

<section class="site-section faq-section faq-two" aria-labelledby="faq-two-column-title">
  <header class="faq-intro">
    <h2 id="faq-two-column-title">
      Frequently asked questions
    </h2>
    <p>
      Start here, or explore the
      <a class="link" href="/docs">
        documentation
      </a>
      .
    </p>
  </header>
  <dl class="faq-answers">
    <div>
      <dt>
        What do I need to get started?
      </dt>
      <dd>
        Start with a page and an idea. Copy the HTML and include the required styles; there is no build step for standalone examples.
      </dd>
    </div>
    <div>
      <dt>
        Can I make it look like my brand?
      </dt>
      <dd>
        Yes. Set your colors, type, and corner radius through the theme, then adjust the copy, spacing, and layout to suit your project.
      </dd>
    </div>
    <div>
      <dt>
        Will it work with my framework?
      </dt>
      <dd>
        Use the standalone HTML or choose a framework example. Keep application state in your framework and bring in only the pieces you need.
      </dd>
    </div>
    <div>
      <dt>
        Does everything need JavaScript?
      </dt>
      <dd>
        No. Layout and styling are CSS, and native elements handle interactions such as these disclosures. Some components add JavaScript for richer behavior.
      </dd>
    </div>
    <div>
      <dt>
        How does it work on smaller screens?
      </dt>
      <dd>
        The layouts adapt to narrower screens. Check your own copy and images at mobile sizes, especially after changing the content or typography.
      </dd>
    </div>
    <div>
      <dt>
        Can I change the source?
      </dt>
      <dd>
        Absolutely. The markup and styles are yours to adapt. Keep the accessible labels and keyboard behavior when making a design your own.
      </dd>
    </div>
  </dl>
</section>

<section
  class="site-section faq-section faq-three"
  aria-labelledby="faq-three-column-title"
>
  <header class="faq-intro">
    <h2 id="faq-three-column-title">
      Frequently asked questions
    </h2>
    <p>
      Start here, or explore the
      <a class="link" href="/docs">
        documentation
      </a>
      .
    </p>
  </header>
  <dl class="faq-answers">
    <div>
      <dt>
        What do I need to get started?
      </dt>
      <dd>
        Start with a page and an idea. Copy the HTML and include the required styles; there is no build step for standalone examples.
      </dd>
    </div>
    <div>
      <dt>
        Can I make it look like my brand?
      </dt>
      <dd>
        Yes. Set your colors, type, and corner radius through the theme, then adjust the copy, spacing, and layout to suit your project.
      </dd>
    </div>
    <div>
      <dt>
        Will it work with my framework?
      </dt>
      <dd>
        Use the standalone HTML or choose a framework example. Keep application state in your framework and bring in only the pieces you need.
      </dd>
    </div>
    <div>
      <dt>
        Does everything need JavaScript?
      </dt>
      <dd>
        No. Layout and styling are CSS, and native elements handle interactions such as these disclosures. Some components add JavaScript for richer behavior.
      </dd>
    </div>
    <div>
      <dt>
        How does it work on smaller screens?
      </dt>
      <dd>
        The layouts adapt to narrower screens. Check your own copy and images at mobile sizes, especially after changing the content or typography.
      </dd>
    </div>
    <div>
      <dt>
        Can I change the source?
      </dt>
      <dd>
        Absolutely. The markup and styles are yours to adapt. Keep the accessible labels and keyboard behavior when making a design your own.
      </dd>
    </div>
  </dl>
</section>

<section
  class="site-section faq-section faq-rows"
  aria-labelledby="faq-side-by-side-title"
>
  <header class="faq-intro">
    <h2 id="faq-side-by-side-title">
      Frequently asked questions
    </h2>
    <p>
      Start here, or explore the
      <a class="link" href="/docs">
        documentation
      </a>
      .
    </p>
  </header>
  <dl class="faq-answers">
    <div>
      <dt>
        What do I need to get started?
      </dt>
      <dd>
        Start with a page and an idea. Copy the HTML and include the required styles; there is no build step for standalone examples.
      </dd>
    </div>
    <div>
      <dt>
        Can I make it look like my brand?
      </dt>
      <dd>
        Yes. Set your colors, type, and corner radius through the theme, then adjust the copy, spacing, and layout to suit your project.
      </dd>
    </div>
    <div>
      <dt>
        Will it work with my framework?
      </dt>
      <dd>
        Use the standalone HTML or choose a framework example. Keep application state in your framework and bring in only the pieces you need.
      </dd>
    </div>
    <div>
      <dt>
        Does everything need JavaScript?
      </dt>
      <dd>
        No. Layout and styling are CSS, and native elements handle interactions such as these disclosures. Some components add JavaScript for richer behavior.
      </dd>
    </div>
    <div>
      <dt>
        How does it work on smaller screens?
      </dt>
      <dd>
        The layouts adapt to narrower screens. Check your own copy and images at mobile sizes, especially after changing the content or typography.
      </dd>
    </div>
    <div>
      <dt>
        Can I change the source?
      </dt>
      <dd>
        Absolutely. The markup and styles are yours to adapt. Keep the accessible labels and keyboard behavior when making a design your own.
      </dd>
    </div>
  </dl>
</section>

<section
  class="site-section faq-section faq-split faq-offset"
  aria-labelledby="faq-offset-title"
>
  <header class="faq-intro">
    <h2 id="faq-offset-title">
      Frequently asked questions
    </h2>
    <p>
      Start here, or explore the
      <a class="link" href="/docs">
        documentation
      </a>
      .
    </p>
  </header>
  <dl class="faq-answers">
    <div>
      <dt>
        What do I need to get started?
      </dt>
      <dd>
        Start with a page and an idea. Copy the HTML and include the required styles; there is no build step for standalone examples.
      </dd>
    </div>
    <div>
      <dt>
        Can I make it look like my brand?
      </dt>
      <dd>
        Yes. Set your colors, type, and corner radius through the theme, then adjust the copy, spacing, and layout to suit your project.
      </dd>
    </div>
    <div>
      <dt>
        Will it work with my framework?
      </dt>
      <dd>
        Use the standalone HTML or choose a framework example. Keep application state in your framework and bring in only the pieces you need.
      </dd>
    </div>
    <div>
      <dt>
        Does everything need JavaScript?
      </dt>
      <dd>
        No. Layout and styling are CSS, and native elements handle interactions such as these disclosures. Some components add JavaScript for richer behavior.
      </dd>
    </div>
    <div>
      <dt>
        How does it work on smaller screens?
      </dt>
      <dd>
        The layouts adapt to narrower screens. Check your own copy and images at mobile sizes, especially after changing the content or typography.
      </dd>
    </div>
    <div>
      <dt>
        Can I change the source?
      </dt>
      <dd>
        Absolutely. The markup and styles are yours to adapt. Keep the accessible labels and keyboard behavior when making a design your own.
      </dd>
    </div>
  </dl>
</section>