ssh-edit/patterns/offcanvas-content.php

<?php
/**
 * Title: Off Canvas Content
 * Slug: srh/offcanvas-content
 * Inserter: no
 */
?>

<!-- wp:group {"tagName":"div","className":"offcanvas-content","layout":{"type":"constrained"},"style":{"spacing":{"padding":{"left":"30px","right":"30px"}}}} -->
<div class="wp-block-group offcanvas-content" style="padding-left:30px;padding-right:30px">
    
    <!-- wp:spacer {"height":"40px"} -->
    <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->

    <!-- wp:heading -->
    <h2 class="wp-block-heading has-text-weight-extra-bold">What can we<br/>help you find?</h2>
    <!-- /wp:heading -->

    <!-- wp:spacer {"height":"20px"} -->
    <div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->


    <!-- wp:group {"tagName":"div","className":"offcanvas-footer","layout":{"type":"constrained"}} -->
    <div class="wp-block-group offcanvas-footer">
        <!-- wp:group {"className":"button-group-vertical","layout":{"type":"constrained"}} -->
        <div class="wp-block-group button-group-vertical">
            <!-- wp:buttons {"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"},"style":{"spacing":{"blockGap":"10px"}}} -->
            <div class="wp-block-buttons is-vertical">
                <!-- wp:button {"width":100,"style":{"spacing":{"padding":{"top":"15px","bottom":"15px"}},"layout":{"selfStretch":"fill","flexSize":null}},"className":"is-style-outline"} -->
                <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
                    <a href="#" class="wp-block-button__link has-text-weight-bold wp-element-button" style="padding-top:15px;padding-bottom:15px">Urgent Care</a>
                </div>
                <!-- /wp:button -->
                <!-- wp:button {"width":100,"style":{"spacing":{"padding":{"top":"15px","bottom":"15px"}},"layout":{"selfStretch":"fill","flexSize":null}},"className":"is-style-outline"} -->
                <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
                    <a href="#" class="wp-block-button__link has-text-weight-bold wp-element-button" style="padding-top:15px;padding-bottom:15px">Primary Care</a>
                </div>
                <!-- /wp:button -->
                <!-- wp:button {"width":100,"style":{"spacing":{"padding":{"top":"15px","bottom":"15px"}},"layout":{"selfStretch":"fill","flexSize":null}},"className":"is-style-outline"} -->
                <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
                    <a href="#" class="wp-block-button__link has-text-weight-bold wp-element-button" style="padding-top:15px;padding-bottom:15px">Specialty Care</a>
                </div>
                <!-- /wp:button -->
                <!-- wp:button {"width":100,"style":{"spacing":{"padding":{"top":"15px","bottom":"15px"}},"layout":{"selfStretch":"fill","flexSize":null}},"className":"is-style-outline"} -->
                <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline">
                    <a href="#" class="wp-block-button__link has-text-weight-bold wp-element-button" style="padding-top:15px;padding-bottom:15px">Virtual Care</a>
                </div>
                <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:group -->
    </div>
    <!-- /wp:group -->

    <!-- wp:spacer {"height":"50px"} -->
    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->

    <!-- wp:separator -->
    <hr class="wp-block-separator has-alpha-channel-opacity"/>
    <!-- /wp:separator -->

    <!-- wp:spacer {"height":"50px"} -->
    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->

    <!-- wp:separator -->
    <hr class="wp-block-separator has-alpha-channel-opacity"/>
    <!-- /wp:separator -->

    <!-- wp:spacer {"height":"50px"} -->
    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->

    <!-- wp:social-links {"iconColor":"base","iconColorValue":"#ffffff","size":"has-normal-icon-size","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|30"},"margin":{"top":"0","bottom":"0"}}},"className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
    <ul class="wp-block-social-links has-normal-icon-size has-icon-color is-style-logos-only">
        <!-- wp:social-link {"url":"https://facebook.com/","service":"facebook"} /-->
        <!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->
        <!-- wp:social-link {"url":"https://instagram.com/","service":"instagram"} /-->
        <!-- wp:social-link {"url":"https://linkedin.com/","service":"linkedin"} /-->
    </ul>
    <!-- /wp:social-links -->

</div>
<!-- /wp:group -->