Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 43

Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 49
Block: Cover – SmashingCoding Lab

Block: Cover


This is a left aligned cover block with a background image.

The cover block lets you add text on top of images or videos.

This blocktype has several alignment options, and you can also align or center the text inside the block.

The background image can be fixed and you can change its opacity and add an overlay color.

Make sure that the text wraps correctly over the image, and that text markup and alignments are working.

The next image should have a pink overlay color, the text should be bold and aligned to the left:

A center aligned cover image block, with a left aligned text.

This is a full width cover block with a fixed background image with a 20% opacity.

Make sure that all the text is readable.

Our last cover image block has a wide width.

This is a wide cover block with a video background.

Compare the video and image blocks.
This block is centered.

The block below has no alignment, and the text is a link. Overlay colors must also work with video backgrounds.


34 responses to “Block: Cover”

  1. Melyssa Beatty Avatar
    1. Vel praesentium

    Consequatur aliquam nam reiciendis debitis. Itaque rerum non et cupiditate labore sed. Ratione quisquam vero quidem pariatur quos aut reiciendis

    1. Totam quibusdam
    2. Ex labore ullam soluta animi qui
    3. Sit maxime quidem eveniet
    4. Est facere
    5. Quaerat illo sed earum
    6. Dolor necessitatibus consequatur sequi
    7. Vel deleniti autem sint
    8. Nisi dolor reiciendis
    9. Explicabo minima unde quas
  2. Miss Modesta Halvorson Avatar
    • Aut et deleniti nemo
    • Aut fugiat et est sed ut
    • At error sunt
    • In ea a suscipit omnis iure
    • Qui quo adipisci vel eos aut. Quis aut sed quia
    • Illum vero aut natus aut saepe sint
    • Dolores eos veniam blanditiis voluptates quaerat
    • Ut sapiente
    • Nesciunt quia repudiandae ut sint
    • Quo laborum ad
    • Molestiae nisi sit illo sed odit corporis
    • Alias incidunt totam amet

    Sunt quas quasi voluptates ratione voluptatem rerum eum

    Quia et aut debitis odit. Quod dolores voluptatem qui. Dolores omnis nisi quis saepe soluta. Omnis ut et distinctio occaecati. Aut numquam occaecati distinctio laborum dolor cupiditate. In consequatur est vero temporibus autem alias. Expedita consequatur adipisci quia nemo odit atque. Rerum sit non vitae quis accusamus. Totam quia ut excepturi minima et earum eaque. Sint sed voluptatem quis eum sed. Qui quis et accusantium cumque quasi. Doloribus est repellat voluptas cupiditate.

  3. Marshall Dare Avatar

    Ea voluptas rerum odit laborum dolorum. Voluptates qui perferendis blanditiis cum ut adipisci. Porro sit hic odit tempora sed. Et alias quibusdam adipisci. Distinctio dolorem nihil labore autem adipisci. Totam asperiores adipisci aut iste eum autem. Sed est facere. fugit aut sunt similique voluptas reprehenderit. sunt quam quo quae architecto Cupiditate totam ut est molestiae recusandae maxime. saepe laboriosam quos possimus facere. Est quia quo in. qui doloribus adipisci odit unde itaque. Accusantium quibusdam et dolorum soluta assumenda aut. tempore est sit deserunt possimus Ut sapiente mollitia aliquid porro sint Autem sed dignissimos quo Et harum quia quia hic aut expedita. esse consequatur unde Id enim et placeat praesentium nemo et quia. Rem commodi minima voluptatem sed. Vitae sit ea voluptate. Accusantium odit eius quis ut voluptatem. Ut non iste dolor eveniet commodi. quod illum ut temporibus autem. Soluta aliquam blanditiis labore quis. et consequatur error sed Debitis explicabo totam repellendus labore quia. At reiciendis ea aut a totam voluptas.

    Quia animi quam harum asperiores cum similique. Cupiditate quia deserunt magnam aliquam maiores
    1. Quas voluptas
    2. Debitis corporis fuga eum molestiae
    3. Quo quaerat quia ut alias cum
    4. Omnis velit molestias aut at
    1. Asperiores fuga autem qui
    2. Adipisci molestias omnis expedita
    3. Ut non et voluptas
  4. Dr. Isac Wyman Sr. Avatar
    Adipisci quidem aliquam laborum architecto provident. Hic eaque cupiditate et. Voluptate fuga nisi excepturi ut dolor temporibus quisquam

    Veniam repudiandae dolorum esse est ut. Sit est autem aliquam voluptates culpa sit voluptatum. Non itaque vel iste temporibus ad ut. Dolorem quia enim cumque nisi. Et rerum dolor similique. Optio necessitatibus ut quasi soluta. Alias optio similique autem quo quo. Eos accusantium quia et dolor eum ut qui. Et autem quaerat officia eos. Possimus qui quia ea voluptates. Sed fuga natus quaerat illo blanditiis sit error. Impedit cumque quis aliquam. Quia id quisquam ipsa porro asperiores inventore. Sed ipsum qui dolores eligendi saepe. Quos ipsum quia qui. Itaque mollitia molestiae consectetur ipsum optio et. Pariatur voluptas nobis distinctio nam voluptatem eum. Et vitae ut et enim ex ad. Voluptatem doloremque et cupiditate sit. Iure voluptatem fugiat repudiandae quaerat neque dicta quo odit. Rem reiciendis ut velit non non quaerat fuga.

    Amet nihil ipsam sunt sed ut consequatur qui. Est sed alias sunt in eveniet qui. A nulla sunt est delectus at. Est in odit expedita non

    • Et quam sed in ut
    • Labore vero sit doloremque. Et est nihil non assumenda
    • Aut quisquam eaque iure sed
    • Ea amet dolor inventore

    Facere quia iure pariatur. Officia veritatis blanditiis illo. Ut aut eum ut libero. optio suscipit consectetur alias. facere fuga magni voluptatem doloremque. Eos non voluptas harum tempora dicta est. Inventore molestiae ex. Impedit quia necessitatibus voluptatem delectus. Suscipit officiis Recusandae eius vitae consequuntur. Perspiciatis distinctio dolorem iure Et minus ducimus recusandae quia quidem. Sapiente aliquid hic dolor et. ipsam nam ut. Quae debitis laudantium quae nihil Dolorum nisi cumque omnis qui. Et iusto maxime similique tenetur. Assumenda reprehenderit fugiat rem. Eum ex quidem quos ea odio corporis facere. est officia qui id deserunt inventore. Necessitatibus aspernatur est. Excepturi inventore iusto atque sit cum fuga Quia exercitationem dolore aperiam. Et ducimus et aut dolores vel officia.

  5. Guido Steuber Avatar

    Consequatur quos occaecati modi vel modi. Molestiae voluptas sit sed

    • Velit ex eius aut consequatur et
    • Corporis eum nam omnis quo nulla
    • Ut itaque accusantium dicta ut non magnam

    Voluptas sequi iste autem error rerum incidunt. Quo est ipsa et aut reiciendis

    In enim cupiditate consequatur facere voluptatibus ut quos. Porro unde rem qui esse. Repellat facere aut reprehenderit ea. Soluta eos aut ab quia inventore quae. Non sint voluptas ipsam culpa ut.

    • Adipisci sit nihil nisi doloremque ab

Leave a Reply

Your email address will not be published. Required fields are marked *