Intro Text and Row of Images

Open
#310 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
wordpress
Domain
frontend

Research direction

Start with the supplied Markup, Screenshot, and Preview link, then inspect the repository’s existing block-pattern entries to determine how this proposed pattern is represented. Done should be a repository-ready “Intro Text and Row of Images” pattern that matches the shown preview and follows the project’s established format.

Written by the indexing model from the issue text.

Description

Category:
Text, Images

Tag:
Pattern

Pattern Meta:
is_web

Screenshot:
image

Markup:

<!-- wp:cover {"isRepeated":true,"dimRatio":10,"overlayColor":"background","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"60px","right":"0px","bottom":"0px","left":"0px"},"margin":{"bottom":"60px","top":"0px"}}}} -->
<div class="wp-block-cover alignfull is-light is-repeated" style="margin-top:0px;margin-bottom:60px;padding-top:60px;padding-right:0px;padding-bottom:0px;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-background-color has-background-dim-10 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"50px","padding":{"bottom":"80px","right":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--60);padding-bottom:80px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:heading {"textAlign":"center","align":"wide","style":{"typography":{"lineHeight":1.4,"fontStyle":"normal","fontWeight":"400"}},"textColor":"body-text","fontSize":"medium"} -->
<h2 class="wp-block-heading alignwide has-text-align-center has-body-text-color has-text-color has-medium-font-size" style="font-style:normal;font-weight:400;line-height:1.4">Located in the heart of 5th Avenue, Varese is a casual yet elegant restaurant, serving authentic cuisine from Schiranna, complimented by fine wine selections from around the world. Enjoy our indoor or outdoor dining options with friends and family.</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"right":"60px","left":"60px"}}},"className":"aligncenter"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link wp-element-button" style="padding-right:60px;padding-left:60px">Book a Table </a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"var:preset|spacing|50"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"bottom"}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:image {"id":8918,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/12/row-1.jpg?w=500" alt="" class="wp-image-8918"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":8919,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/12/row-2.jpg?w=500" alt="" class="wp-image-8919"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":8920,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/12/row-3.jpg?w=500" alt="" class="wp-image-8920"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":8921,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/12/row-4.jpg?w=500" alt="" class="wp-image-8921"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":8922,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/12/row-5.jpg?w=500" alt="" class="wp-image-8922"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Preview:
https://dotcompatterns.wordpress.com/?p=8914&preview=true

Based on one of the patterns used in Varese theme.
cc: @alaczek @iamtakashi

Dominant language
No language data
Stars
7
Forks
2
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blockpatterns

All issues in Automattic/blockpatterns

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.