wptheme.com

Every question, grouped by service: a free WordPress block pattern

How to use it

  1. Copy the markup below.
  2. In the block editor, open the options menu and switch to the Code editor.
  3. Paste the markup where you want the section, then switch back to the Visual editor.
  4. Swap in your own text and images. Colors come from your theme's palette.

Block markup

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"className":"gw-ruled-section","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull gw-ruled-section" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"36%"} -->
<div class="wp-block-column" style="flex-basis:36%"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Frequently asked questions</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"gw-ruled-list","layout":{"type":"default"}} -->
<div class="wp-block-group gw-ruled-list"><!-- wp:details -->
<details class="wp-block-details"><summary>How much does it cost?</summary><!-- wp:paragraph -->
<p>Every job is different, so we give you a written, upfront quote before any work starts.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details -->
<details class="wp-block-details"><summary>Are you licensed and insured?</summary><!-- wp:paragraph -->
<p>Yes. We are fully licensed and insured, and we are happy to share proof on request.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details -->
<details class="wp-block-details"><summary>Which areas do you serve?</summary><!-- wp:paragraph -->
<p>We serve the metro area and surrounding towns. See the service areas section or call to confirm.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details -->
<details class="wp-block-details"><summary>Do you guarantee your work?</summary><!-- wp:paragraph -->
<p>Yes. If something is not right, we come back and make it right at no charge.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Uses preset color and spacing slugs from the Groundwork theme (base, surface, accent, contrast). In another theme, map them to that theme's palette.

See it in a live site