Skip to content

Instantly share code, notes, and snippets.

@webmandesign
Created March 13, 2024 16:07
Show Gist options
  • Save webmandesign/2a6e58454073818a2624e022de00257b to your computer and use it in GitHub Desktop.
Save webmandesign/2a6e58454073818a2624e022de00257b to your computer and use it in GitHub Desktop.
Gwyneth chess pattern
<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0"},"blockGap":{"top":"0","left":"0"},"padding":{"top":"var:preset|spacing|content","bottom":"var:preset|spacing|content"}}},"backgroundColor":"primary","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-primary-background-color has-background" style="margin-top:0;padding-top:var(--wp--preset--spacing--content);padding-bottom:var(--wp--preset--spacing--content)"><!-- wp:heading {"className":"is-style-screen-reader-text"} -->
<h2 class="wp-block-heading is-style-screen-reader-text">This is title</h2>
<!-- /wp:heading -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:media-text {"mediaId":987654321,"mediaLink":"#0","mediaType":"image","imageFill":true,"style":{"border":{"radius":{"topLeft":"3rem","topRight":"3rem","bottomLeft":"0rem","bottomRight":"0rem"},"width":"2px"}},"backgroundColor":"primary"} -->
<div class="wp-block-media-text is-stacked-on-mobile is-image-fill has-primary-background-color has-background" style="border-width:2px;border-top-left-radius:3rem;border-top-right-radius:3rem;border-bottom-left-radius:0rem;border-bottom-right-radius:0rem"><figure class="wp-block-media-text__media" style="background-image:url(https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg);background-position:50% 50%"><img src="https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg" alt="Image alternative description text" class="wp-image-987654321 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem","padding":{"top":"var:preset|spacing|m","bottom":"var:preset|spacing|m"}}},"layout":{"type":"constrained","contentSize":"320px"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--m);padding-bottom:var(--wp--preset--spacing--m)"><!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":"var:preset|duotone|secondary"}}} -->
<figure class="wp-block-image size-large"><img src="data:image/svg+xml,%3Csvg xmlns=&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; width=&quot;64&quot; height=&quot;64&quot; viewBox=&quot;0 0 24 24&quot;%3E%3Cpath fill=&quot;currentColor&quot; d=&quot;M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18c-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18c.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9M12 4.15l-1.89 1.07L16 8.61l1.96-1.11L12 4.15M6.04 7.5L12 10.85l1.96-1.1l-5.88-3.4L6.04 7.5M5 15.91l6 3.38v-6.71L5 9.21v6.7m14 0v-6.7l-6 3.37v6.71l6-3.38Z&quot;%2F%3E%3C%2Fsvg%3E" alt="Image alternative description text"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3,"style":{"typography":{"textTransform":"lowercase"}}} -->
<h3 class="wp-block-heading" style="text-transform:lowercase">This is title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.05em"}},"textColor":"primary-mixed","fontSize":"s"} -->
<p class="has-primary-mixed-color has-text-color has-s-font-size" style="letter-spacing:0.05em;text-transform:uppercase">Some text</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s","bottom":"var:preset|spacing|s"}}},"className":"is-style-dashed"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-dashed" style="margin-top:var(--wp--preset--spacing--s);margin-bottom:var(--wp--preset--spacing--s)"/>
<!-- /wp:separator -->
<!-- wp:paragraph -->
<p>Just a short sentence. This is just a demo text you should…</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--s)"><!-- wp:button {"textColor":"primary-mixed","style":{"spacing":{"padding":{"top":"var:preset|spacing|s","right":"var:preset|spacing|s","bottom":"var:preset|spacing|s","left":"var:preset|spacing|s"}}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-mixed-color has-text-color wp-element-button" href="#0" style="padding-top:var(--wp--preset--spacing--s);padding-right:var(--wp--preset--spacing--s);padding-bottom:var(--wp--preset--spacing--s);padding-left:var(--wp--preset--spacing--s)">Click here →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:media-text {"mediaId":987654321,"mediaLink":"#0","mediaType":"image","imageFill":true,"style":{"border":{"radius":{"topLeft":"3rem","topRight":"3rem","bottomLeft":"0rem","bottomRight":"0rem"},"width":"2px"}},"backgroundColor":"primary"} -->
<div class="wp-block-media-text is-stacked-on-mobile is-image-fill has-primary-background-color has-background" style="border-width:2px;border-top-left-radius:3rem;border-top-right-radius:3rem;border-bottom-left-radius:0rem;border-bottom-right-radius:0rem"><figure class="wp-block-media-text__media" style="background-image:url(https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg);background-position:50% 50%"><img src="https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg" alt="Image alternative description text" class="wp-image-987654321 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem","padding":{"top":"var:preset|spacing|m","bottom":"var:preset|spacing|m"}}},"layout":{"type":"constrained","contentSize":"320px"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--m);padding-bottom:var(--wp--preset--spacing--m)"><!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":"var:preset|duotone|secondary"}}} -->
<figure class="wp-block-image size-large"><img src="data:image/svg+xml,%3Csvg xmlns=&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; width=&quot;64&quot; height=&quot;64&quot; viewBox=&quot;0 0 24 24&quot;%3E%3Cpath fill=&quot;currentColor&quot; d=&quot;M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18c-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18c.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9M12 4.15l-1.89 1.07L16 8.61l1.96-1.11L12 4.15M6.04 7.5L12 10.85l1.96-1.1l-5.88-3.4L6.04 7.5M5 15.91l6 3.38v-6.71L5 9.21v6.7m14 0v-6.7l-6 3.37v6.71l6-3.38Z&quot;%2F%3E%3C%2Fsvg%3E" alt="Image alternative description text"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3,"style":{"typography":{"textTransform":"lowercase"}}} -->
<h3 class="wp-block-heading" style="text-transform:lowercase">This is title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.05em"}},"textColor":"primary-mixed","fontSize":"s"} -->
<p class="has-primary-mixed-color has-text-color has-s-font-size" style="letter-spacing:0.05em;text-transform:uppercase">Some text</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s","bottom":"var:preset|spacing|s"}}},"className":"is-style-dashed"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-dashed" style="margin-top:var(--wp--preset--spacing--s);margin-bottom:var(--wp--preset--spacing--s)"/>
<!-- /wp:separator -->
<!-- wp:paragraph -->
<p>Just a short sentence. This is just a demo text you should…</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--s)"><!-- wp:button {"textColor":"primary-mixed","style":{"spacing":{"padding":{"top":"var:preset|spacing|s","right":"var:preset|spacing|s","bottom":"var:preset|spacing|s","left":"var:preset|spacing|s"}}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-mixed-color has-text-color wp-element-button" href="#0" style="padding-top:var(--wp--preset--spacing--s);padding-right:var(--wp--preset--spacing--s);padding-bottom:var(--wp--preset--spacing--s);padding-left:var(--wp--preset--spacing--s)">Click here →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:media-text {"mediaPosition":"right","mediaId":987654321,"mediaLink":"#0","mediaType":"image","imageFill":true,"style":{"border":{"radius":{"topLeft":"0rem","topRight":"0rem","bottomLeft":"3rem","bottomRight":"3rem"},"width":"2px"}},"backgroundColor":"primary"} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile is-image-fill has-primary-background-color has-background" style="border-width:2px;border-top-left-radius:0rem;border-top-right-radius:0rem;border-bottom-left-radius:3rem;border-bottom-right-radius:3rem"><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem","padding":{"top":"var:preset|spacing|m","bottom":"var:preset|spacing|m"}}},"layout":{"type":"constrained","contentSize":"320px"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--m);padding-bottom:var(--wp--preset--spacing--m)"><!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":"var:preset|duotone|secondary"}}} -->
<figure class="wp-block-image size-large"><img src="data:image/svg+xml,%3Csvg xmlns=&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; width=&quot;64&quot; height=&quot;64&quot; viewBox=&quot;0 0 24 24&quot;%3E%3Cpath fill=&quot;currentColor&quot; d=&quot;M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18c-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18c.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9M12 4.15l-1.89 1.07L16 8.61l1.96-1.11L12 4.15M6.04 7.5L12 10.85l1.96-1.1l-5.88-3.4L6.04 7.5M5 15.91l6 3.38v-6.71L5 9.21v6.7m14 0v-6.7l-6 3.37v6.71l6-3.38Z&quot;%2F%3E%3C%2Fsvg%3E" alt="Image alternative description text"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3,"style":{"typography":{"textTransform":"lowercase"}}} -->
<h3 class="wp-block-heading" style="text-transform:lowercase">This is title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.05em"}},"textColor":"primary-mixed","fontSize":"s"} -->
<p class="has-primary-mixed-color has-text-color has-s-font-size" style="letter-spacing:0.05em;text-transform:uppercase">Some text</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s","bottom":"var:preset|spacing|s"}}},"className":"is-style-dashed"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-dashed" style="margin-top:var(--wp--preset--spacing--s);margin-bottom:var(--wp--preset--spacing--s)"/>
<!-- /wp:separator -->
<!-- wp:paragraph -->
<p>Just a short sentence. This is just a demo text you should…</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--s)"><!-- wp:button {"textColor":"primary-mixed","style":{"spacing":{"padding":{"top":"var:preset|spacing|s","right":"var:preset|spacing|s","bottom":"var:preset|spacing|s","left":"var:preset|spacing|s"}}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-mixed-color has-text-color wp-element-button" href="#0" style="padding-top:var(--wp--preset--spacing--s);padding-right:var(--wp--preset--spacing--s);padding-bottom:var(--wp--preset--spacing--s);padding-left:var(--wp--preset--spacing--s)">Click here →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div><figure class="wp-block-media-text__media" style="background-image:url(https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg);background-position:50% 50%"><img src="https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg" alt="Image alternative description text" class="wp-image-987654321 size-full"/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:media-text {"mediaPosition":"right","mediaId":987654321,"mediaLink":"#0","mediaType":"image","imageFill":true,"style":{"border":{"radius":{"topLeft":"0rem","topRight":"0rem","bottomLeft":"3rem","bottomRight":"3rem"},"width":"2px"}},"backgroundColor":"primary"} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile is-image-fill has-primary-background-color has-background" style="border-width:2px;border-top-left-radius:0rem;border-top-right-radius:0rem;border-bottom-left-radius:3rem;border-bottom-right-radius:3rem"><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem","padding":{"top":"var:preset|spacing|m","bottom":"var:preset|spacing|m"}}},"layout":{"type":"constrained","contentSize":"320px"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--m);padding-bottom:var(--wp--preset--spacing--m)"><!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":"var:preset|duotone|secondary"}}} -->
<figure class="wp-block-image size-large"><img src="data:image/svg+xml,%3Csvg xmlns=&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; width=&quot;64&quot; height=&quot;64&quot; viewBox=&quot;0 0 24 24&quot;%3E%3Cpath fill=&quot;currentColor&quot; d=&quot;M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18c-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18c.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9M12 4.15l-1.89 1.07L16 8.61l1.96-1.11L12 4.15M6.04 7.5L12 10.85l1.96-1.1l-5.88-3.4L6.04 7.5M5 15.91l6 3.38v-6.71L5 9.21v6.7m14 0v-6.7l-6 3.37v6.71l6-3.38Z&quot;%2F%3E%3C%2Fsvg%3E" alt="Image alternative description text"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3,"style":{"typography":{"textTransform":"lowercase"}}} -->
<h3 class="wp-block-heading" style="text-transform:lowercase">This is title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"0.05em"}},"textColor":"primary-mixed","fontSize":"s"} -->
<p class="has-primary-mixed-color has-text-color has-s-font-size" style="letter-spacing:0.05em;text-transform:uppercase">Some text</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s","bottom":"var:preset|spacing|s"}}},"className":"is-style-dashed"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-dashed" style="margin-top:var(--wp--preset--spacing--s);margin-bottom:var(--wp--preset--spacing--s)"/>
<!-- /wp:separator -->
<!-- wp:paragraph -->
<p>Just a short sentence. This is just a demo text you should…</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|s"}}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--s)"><!-- wp:button {"textColor":"primary-mixed","style":{"spacing":{"padding":{"top":"var:preset|spacing|s","right":"var:preset|spacing|s","bottom":"var:preset|spacing|s","left":"var:preset|spacing|s"}}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-mixed-color has-text-color wp-element-button" href="#0" style="padding-top:var(--wp--preset--spacing--s);padding-right:var(--wp--preset--spacing--s);padding-bottom:var(--wp--preset--spacing--s);padding-left:var(--wp--preset--spacing--s)">Click here →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div><figure class="wp-block-media-text__media" style="background-image:url(https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg);background-position:50% 50%"><img src="https://pic.webmandesign.eu/WMDEMO/wine/pexels-grape-things-7347157.jpg" alt="Image alternative description text" class="wp-image-987654321 size-full"/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment