wptheme.com

The availability sheet: 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-band gw-av-section","backgroundColor":"accent-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull gw-band gw-av-section has-accent-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"wide","className":"gw-av-scope","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide gw-av-scope"><!-- wp:paragraph {"className":"gw-label"} -->
<p class="gw-label">What we do</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Services</h2>
<!-- /wp:heading -->

<!-- wp:group {"className":"gw-switch gw-switch-kinds","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group gw-switch gw-switch-kinds"><!-- wp:paragraph {"className":"gw-switch-item"} -->
<p class="gw-switch-item"><a href="/services/"><strong>Service one</strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-switch-item"} -->
<p class="gw-switch-item"><a href="/services/"><strong>Service two</strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-switch-item"} -->
<p class="gw-switch-item"><a href="/services/"><strong>Service three</strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-switch-item"} -->
<p class="gw-switch-item"><a href="/services/"><strong>Service four</strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-switch-item"} -->
<p class="gw-switch-item"><a href="/services/"><strong>Service five</strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-switch-item"} -->
<p class="gw-switch-item"><a href="/services/"><strong>Service six</strong></a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:table {"className":"gw-av gw-av-kinds"} -->
<figure class="wp-block-table gw-av gw-av-kinds"><table class="has-fixed-layout"><thead><tr><th>What we do</th><th>What it covers</th></tr></thead><tbody><tr><td><a href="/services/">Service one</a></td><td>A short, plain-language description of the service and who it is for.</td></tr><tr><td><a href="/services/">Service two</a></td><td>A short, plain-language description of the service and who it is for.</td></tr><tr><td><a href="/services/">Service three</a></td><td>A short, plain-language description of the service and who it is for.</td></tr><tr><td><a href="/services/">Service four</a></td><td>A short, plain-language description of the service and who it is for.</td></tr><tr><td><a href="/services/">Service five</a></td><td>A short, plain-language description of the service and who it is for.</td></tr><tr><td><a href="/services/">Service six</a></td><td>A short, plain-language description of the service and who it is for.</td></tr></tbody></table></figure>
<!-- /wp:table --></div>
<!-- /wp:group --></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.