Skip to content

Instantly share code, notes, and snippets.

@markhowellsmead

markhowellsmead/cards.html

Last active November 11, 2021 15:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markhowellsmead/31e6de1984ef3fe2dac4777f7f2335dd to your computer and use it in GitHub Desktop.
Save markhowellsmead/31e6de1984ef3fe2dac4777f7f2335dd to your computer and use it in GitHub Desktop.
Download ZIP
Three-column card layout (raw Gutenberg HTML)
Raw
cards.html
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":62096,"sizeSlug":"medium","linkDestination":"none"} -->
<figure class="wp-block-image size-medium"><img src="https://permanenttourist.ch/wp-content/uploads/2021/10/20211024-DSCF1065-768x768.jpg" alt="" class="wp-image-62096"/><figcaption>Image caption</figcaption></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3 id="card-title">Card title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Card Text.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://permanenttourist.ch/wordpress/">Button link</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":62096,"sizeSlug":"medium","linkDestination":"none"} -->
<figure class="wp-block-image size-medium"><img src="https://permanenttourist.ch/wp-content/uploads/2021/10/20211024-DSCF1065-768x768.jpg" alt="" class="wp-image-62096"/><figcaption>Image caption</figcaption></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3 id="card-title">Card title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Card Text.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://permanenttourist.ch/wordpress/">Button link</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":62096,"sizeSlug":"medium","linkDestination":"none"} -->
<figure class="wp-block-image size-medium"><img src="https://permanenttourist.ch/wp-content/uploads/2021/10/20211024-DSCF1065-768x768.jpg" alt="" class="wp-image-62096"/><figcaption>Image caption</figcaption></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3 id="card-title">Card title</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Card Text.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://permanenttourist.ch/wordpress/">Button link</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment