Build faster with AI recipes

Nexter Blocks Recipe Library

Prompt ideas for 105 blocks. Copy any one of them straight into your AI assistant and adjust from there.

Search a block /

SAMPLE RECIPE

HOW IT WORKS

Install Nexter Blocks

Activate the plugin and switch on the blocks you want in Nexter › Blocks.

Connect the MCP server

Add the site’s MCP connection to your AI assistant.

Explore Nexter Abilities →

Copy a recipe, build in Gutenberg

Paste a recipe; your AI assistant builds the block for you.

Add an FAQ accordion with three questions about shipping, returns and payment options.
Add a small star icon in front of each question so the list looks friendlier.
Give each accordion title a thin grey border, rounded corners and a soft grey background with 16px of padding.
Open the accordion panels when visitors hover over them instead of clicking.
Show a plus icon on the right side of each accordion title that turns into a minus when the panel is open.
When a panel is open, make its title purple and give the title bar a light grey background.
Use H2 headings for the accordion titles so search engines read each question as a heading.
Add FAQ schema markup to this accordion so the questions can appear as rich results in Google.
Add an expand all and collapse all button above the accordion.
Center the accordion titles, make them 20px, and leave 10px of space between the panels.

On the checkout page, add an order notes section headed “Delivery instructions” with the note field labelled “Anything the courier should know?”.
Add just the order notes text box for checkout, no heading above it, and label it “Gift message or special request”.
Give the checkout notes heading (“Notes for your order”) a deep navy text colour on a pale blue background.
Make the order notes heading bold, 26px and uppercase, in a dark teal colour.
Frame the notes heading in a card: 2px orange border, 8px rounded corners, 12px by 18px padding and 16px of space underneath.
Style the label above the order notes box: slate grey colour, 15px semi-bold text and 8px of padding around it.
Make the order notes text area taller, 180px high, with a soft cream background and dark brown text.
Give the order notes text area a 1px grey border, 10px rounded corners and roomy 14px by 16px padding.
In the order notes box, show a light grey placeholder that turns darker when the customer clicks in, and make the typed text purple while focused.
Set the typed text inside the order notes box to 17px medium weight on a white background with a thin blue border.

Add a centred, solid pill-shaped call-to-action button “Start your free trial” that opens the signup page in a new tab.
Create a navy button “Browse the collection” with white text that flips to coral with a dark-navy label when hovered.
Add a pulsing outline button “Book a demo” that draws attention with a soft ripple.
Make a playful button “Join the club” that bursts into celebration emoji when the mouse moves over it.
Add a sharp-cornered button “View pricing” whose border draws itself around the label on hover.
Add a download button for the brochure: label “Get the brochure” with a small “PDF, 2.4 MB” line, saved as nexter-brochure.pdf.
Add a compact round download-icon button with the caption “Download the setup guide” that animates a tick when clicked.
Add a wide download button “Download the annual report” with a progress meter underneath that fills while the file downloads.
Style a large rounded button “Get started today”: 700 weight 20px text, generous 18px by 44px padding, a 2px coral border, a 40px radius and a soft shadow, right aligned.
Add a calm outlined button “Read our story” as an understated outlined pill, with a dark-teal label and a teal hover fill.

Add a line chart of monthly website visitors from January to June: 4,200, 5,100, 4,800, 6,300, 7,000 and 8,400.
Show quarterly revenue as a vertical bar chart comparing 2025 and 2026 for Q1 to Q4 (2025: 120, 135, 150, 170; 2026: 140, 160, 175, 210 in thousands).
Add a pie chart of our traffic sources: Organic 45, Direct 25, Social 18, Email 12, each slice in its own colour.
Create a doughnut chart showing how the support budget is split: Staff 55%, Tools 25%, Training 15%, Other 5%.
Add a radar chart rating our product against a competitor on five criteria: Speed, Design, Support, Price, Features.
Show an area-style polar chart of survey answers: Excellent 38, Good 29, Average 18, Poor 9.
Add a bubble chart of three product lines, plotting price, rating and sales volume as bubble size.
Make a smooth line chart of average temperatures (Jan 4, Feb 6, Mar 10, Apr 15, May 20) with star-shaped points, thin grey grid lines and a rounded curve.
Put dollar signs before the numbers on the vertical axis and a K after them for a bar chart of monthly sales (Jan 12, Feb 15, Mar 11, Apr 18).
Add a 360px-tall line chart of weekly sign-ups with the legend at the top-right, white-on-navy tooltips that open on click, and a quick 1.5 second ease-out animation.

Put the line “Crafted for makers who care” on the page as centred display text that links to our About page and opens in a new tab.
Add plain, non-linked display text “Design that moves people” at 56px extra-bold in navy that shifts to coral when hovered.
Make the words “Summer Sale” a big headline filled with a coral-to-pink gradient, switching to a navy-to-teal gradient on hover.
Show “OUTDOOR ADVENTURES” as hollow outline lettering: a 2px navy stroke with a white fill, 80px tall.
Create a scrolling announcement ticker that runs right to left: “New arrivals every Friday – Free returns – Carbon neutral shipping”.
Build a stacked services list with three big words – Design, Develop, Deliver – each linking to its own page, centred.
Stack two words, “Branding” in navy and “Strategy” in teal, and let each turn coral when hovered.
Add the line “Hover me for the underline” with an animated overlay underline (style 3) that appears when the mouse is over it.
Give the heading “Meet the studio” a wavy coral underline that disappears on hover.
Make the word “Gallery” reveal a photo of the studio when someone hovers over it (reveal style 2).

Show our three studio services – Brand Identity, Web Design and Photography – as a row of image panels that expand when hovered, each with a short description.
Make a horizontal image accordion of four services in the second accordion style, with the second panel open first and a wider expanded panel.
Create sliding service boxes in the second sliding style showing Brand Identity, Web Design and Photography with their images.
Lay out our four services as article-style cards in the second article style, with the title and sub-title over the photo and the description revealed on hover.
Build info banners for three services with an icon above each title; the photo and description appear on the right-hand side panel when hovered.
Create a hover-section: three service rows where the page background image changes to the service photo as each row is hovered, with a Learn more button inside each.
Show Brand Identity, Web Design and Photography as fancy photo cards, each with an icon, a short description and a Learn more button linking to its service page.
List our services as service cards with an icon, description and a bullet list of what is included, e.g. Logo design, Colour palette, Brand guidelines.
Create a full-width portfolio panel in the second portfolio style: a list of project titles over a big photo that changes as each title is hovered, with a “View project” call-out.
Style the fancy photo cards: 24px bold white titles that turn gold on hover, soft grey descriptions, a 3-column grid with 24px gap, and rounded 16px content boxes with 28px padding.

Add a promo code box to the checkout with the prompt “Have a promo code?” and an Apply button.
Add a discount code section with the body title “Redeem your voucher”, placeholder text “Type your voucher code” and a “Redeem” button.
Show the coupon field without the clickable header bar, just the label, input and button.
Style the coupon header bar with white text on dark green, and make the text turn gold on hover.
Wrap the coupon header in a 1px green border with 6px rounded corners and 14px by 20px padding.
Give the coupon body area a pale mint background, dark green text, a 1px border and 20px padding.
Make the coupon input 260px wide with a white background, dark text, a 1px grey border and rounded corners.
Turn the Apply button solid orange with white text, and darker orange with white text on hover.
Make the coupon button pill-shaped with 12px by 28px padding and 14px of space between the input and the button.
Set the coupon header text to 18px bold, the body label to 14px, and the button text to 15px semi-bold uppercase.

Add a simple audio player for the podcast episode “Morning Session” by Lena Hart, using the compact classic layout with the track name and artist above the controls.
Build a three-track playlist player for our album preview: Morning Session by Lena Hart, Night Drive by Kai Moreno and City Lights by Nova Reyes, so listeners can switch tracks from the list.
Make a slim, controls-only audio player in the second layout for a short voice-over clip called Welcome Message by the Studio Team.
Show the Night Drive single with its square album cover next to the title in the third layout, using the cover artwork from the media URL.
Create a bold music card in layout five for Kai Moreno’s Night Drive, with the artwork filling the left side and the play, previous and next buttons beside it.
Use the cover as a full background behind a slim player in layout four for the City Lights single, with the title and artist at the top and the controls underneath.
Set up a full-bleed cover player in layout eight for the Morning Session mix, with the cover image behind the details and the artist name shown under the title. Change the connecting word to “performed by”.
Colour the Night Drive player to match a dark theme: gold track title, soft grey artist name, a gold play button with a dark icon, and a gold progress bar on a muted track.
Make the song title large and bold in uppercase with a little letter spacing, and keep the artist line small and italic.
Add a minimal timeline-style player in layout seven for the City Lights demo, wrapped in a card with a pale background, 24px padding, a thin border, rounded 16px corners and a soft shadow, limited to 520px wide.

Add a before and after slider for our kitchen renovation: the old kitchen on the left, the finished kitchen on the right, labelled Before and After.
Make a vertical before/after comparison where the divider moves up and down, labelled Winter and Summer.
Compare a photo from 2016 with today’s: label the two sides “2016” and “2026” and start the divider 70% of the way across.
Require visitors to click and drag the handle instead of just hovering, and stretch the comparison to the full width of its container.
Use a thick white divider line, 6px wide, for the comparison and show a line along the top of the slider.
Put the divider handle at the bottom with our logo mark as the handle icon.
Style the Before/After labels as navy pills with white uppercase 14px bold text, 6px by 14px padding and fully rounded corners.
Give both labels a 2px coral border and a soft shadow, and align the whole slider to the left of the page.
Show the comparison with no text labels at all, just the two photos and the divider, and a 4px orange divider.
Centre the slider and use the italic 16px label style: labels “Pre-restoration” and “Restored” with white text on a semi-transparent black background.

Add the checkout billing form under the heading “Where should we send the invoice?”.
Show the billing fields without any heading above them.
Give the billing heading (“Billing Details”) a navy colour on a light grey background.
Make the billing heading 28px bold with 20px of space below, in dark red.
Put the billing heading in a bordered tag: 2px purple border, 10px radius, 10px by 16px padding.
Colour the billing field labels dark slate, make the required star bright red, and leave 6px between label and field.
Make the billing field labels 13px, bold and uppercase.
Make the billing inputs 52px tall with a cream background and brown text.
Give the billing inputs a 1px grey border that turns blue when focused, with 8px rounded corners.
Style billing input text: 16px, placeholder grey that darkens on focus, and typed text dark green when focused, with 6px of margin around each field.

Add a simple one-line quote from Maya Angelou in the minimal text-only style: “We may encounter many defeats but we must not be defeated.”
Add a customer testimonial in the second blockquote style from Priya Nair, head of operations at Northwind Logistics.
Add a centred pull-quote from Albert Einstein: “Imagination is more important than knowledge.”
Add a Benjamin Franklin quote with a large red opening quotation-mark icon on the quote, nudged slightly up and left.
Add an Alan Kay quote and colour the quote text dark slate and the author name a muted blue.
Show the Leonardo da Vinci quote with the quote text in 26px Lora serif and the author name at 15px.
Put the quote on a soft cream card with padding, rounded corners and spacing around it.
Add a thick green accent border on the left side of the quote.
Give the quote card a soft drop shadow on a white background.
Add a Kent Beck quote that, on hover, turns the quote card dark navy and the text white.

Add a breadcrumb trail at the top of this page so visitors can always see where they are in the site.
Add breadcrumbs that start with the word ‘Start’ instead of ‘Home’ and drop the little house icon.
Show breadcrumbs with a slash-style arrow between each level: use a right arrow icon as the separator.
Add a breadcrumb trail that shows only the parent pages and hides the name of the page the visitor is currently on.
On blog posts, add breadcrumbs that include the post’s category trail, so a visitor sees Home, Guides, then the full article title without it being cut short.
Use the second breadcrumb style, where each level looks like a tab, with a soft grey background on every item.
Centre the breadcrumb trail and let it stretch to the full width of the content area.
Style the breadcrumbs with grey links that turn deep blue on hover, and make the current page stand out with the same blue.
Put the breadcrumbs in a rounded light-blue bar with a thin blue border, 12px of padding, 15px text and an orange home icon.
Add breadcrumbs with search-engine structured data so Google can show the trail in search results.

Add a button labelled “Book a free consultation” that opens https://example.com/book in a new tab, marked nofollow, with the accessible label “Book a free consultation with our team”.
Add a slide-up button that says “Shop the sale” and swaps to “Up to 40% off” when someone hovers over it.
Add a “Read the case study” button with the long animated arrow that slides across on hover, arrow and text in deep teal.
Add a “See all features” button with a chevron arrow badge on the right, in navy text with an orange arrow.
Add a minimal “View pricing” text button with a 3px green underline that turns blue when hovered.
Add a “Join the beta” button with a small “New” tag above the label.
Make a “Add to cart” button blue with white text that flips to amber with dark text on hover.
Add a pill-shaped “Subscribe now” button with bold 18px text and generous padding (16px top and bottom, 40px left and right), solid purple background.
Give the “Get started” button a soft blue glow shadow that grows stronger when hovered.
Add a centred, 280px-wide “Proceed to checkout” button in dark green.

Build a slider from my four saved reusable blocks (Free shipping, Easy returns, Secure checkout, Friendly support) showing one slide at a time with arrows and dots.
Make the same four reusable blocks scroll as a looping, auto-playing carousel that shows three at a time and advances every three seconds.
Cross-fade between the four reusable blocks one at a time instead of sliding, with navigation dots.
Show the reusable blocks in a vertical carousel, two at a time, that moves with the mouse wheel.
Add dot navigation in the second dot style, with solid navy dots and a coral active dot, placed 24px below the slides.
Add round navy arrows (style 4) with white icons, centred under the slides, turning coral on hover.
Autoplay the carousel every 2 seconds with a slow 800ms slide speed, and pause it whenever a visitor hovers over it.
Space the slides 20px apart, hide anything that overflows the slide edges, and start on the third slide.
Show four reusable blocks in random order each time the page loads, loop endlessly and let visitors browse with the keyboard arrow keys.
Make a two-up slider that advances two slides per click, with dragging by mouse turned off.

Add Previous and Next buttons beneath my “perks” carousel so visitors can step through the slides.
Add centred round prev/next arrow buttons – arrow icons only, no text – for the “offers” carousel.
Make the carousel buttons navy with white text, turning coral on hover, with a 24px gap between them and an 18px icon.
Style the carousel buttons as outlined pills: 2px navy border, fully rounded corners and 12px by 28px padding, right-aligned.
Use dot navigation instead of buttons: four icon dots with tooltips (Shipping, Returns, Secure, Support) that jump to each slide.
Make the dot navigation use the animated border style in coral, with tooltips below each dot.
Stack the carousel dots vertically with tooltips popping out to the right, 48px dots and 22px icons.
Color the dots: soft-grey backgrounds with navy icons, active dot filled coral with a white icon.
Show a slide counter like 01 / 04 next to the Previous/Next buttons for the “counter” carousel.
Give the carousel remote both buttons and dots, with accessible labels “Show previous perk” and “Show next perk” on the buttons.

Build the cart page table with the column headings Item, Unit price, Qty and Line total.
Show a Continue Shopping button labelled “Keep browsing” under the cart table.
Hide the coupon form in the cart table but keep the Update Cart button renamed to “Refresh basket”.
Keep the coupon form in the cart table with the placeholder “Got a voucher?” and a button reading “Redeem”.
Turn off the Empty Cart and Update Cart buttons but keep the coupon form, for a leaner cart table.
Style the cart table headings with white text on dark navy, and wrap the table in a 1px grey border with 10px radius.
Make the cart rows a warm off-white background with dark text, blue product links that turn orange on hover, and 14px padding.
Show round product thumbnails 80px wide in the cart and move the remove button to the right.
Style the quantity box: 70px wide, light blue background, dark text, 1px blue border, 6px radius.
Make the Update Cart button solid green with white text (dark green on hover), pill-shaped, and the Empty Cart button red with white text.

Add a cart totals panel titled “Order summary” with a “Go to secure checkout” button.
Show the cart totals with the rows relabelled “Items subtotal” and “Amount due”.
Style the cart totals heading: white text on deep purple, 16px by 20px padding, 8px radius.
Add a dark bottom border to the totals heading with 18px of space under it.
Wrap the whole cart totals box in a 1px grey border with 12px rounded corners and 24px padding.
Make the totals rows dark grey with bold green prices on a faint grey background and 12px padding.
Separate the totals rows with a light dashed border.
Make the checkout button solid blue with white text, and navy on hover.
Round the checkout button into a pill with 14px by 30px padding and 16px margin above it.
Set the totals heading to 22px bold, row text to 15px and prices to 17px semi-bold, button text 16px uppercase.

Add a returning-customer login prompt at the top of the checkout.
Style the login notice bar with dark text, a blue link that turns orange on hover, and a pale yellow background.
Frame the login notice in a 1px amber border with 6px radius, 12px by 18px padding and 14px space below.
Make the login notice text 16px medium weight.
Colour the login form description grey, 14px, with 12px below.
Style the login form labels dark navy with a red required star, 14px semi-bold, 6px under each label.
Make the login inputs 48px tall on white with dark text, a grey placeholder, and a 1px border with 6px radius.
Make login input text turn dark green when focused, with a darker placeholder, and 10px by 14px padding.
Style the Remember me label in slate grey, 13px, with 14px space beneath.
Make the Login button navy with white text (blue on hover), pill-shaped, with 12px by 30px padding.

Add a floating social menu: a share button that fans out Facebook, Instagram, YouTube and LinkedIn icons around it when hovered.
Make the circle menu open on click instead of hover and fan the icons out upward and to the left from a toggle in the bottom-right corner.
Spread the social icons out on a 120px radius, opening slowly over 800 milliseconds.
Build a straight vertical menu that drops the four social icons in a line below the toggle button.
Make a horizontal straight menu that slides the icons out to the right of the toggle, using the second menu style.
Use the third toggle button style with a hamburger icon, a 56px round toggle and white icon on a navy background.
Colour each social icon: navy circles with white icons that turn coral on hover.
Dim the page behind the circle menu with a translucent navy overlay while it is open, using a plus icon as the toggle.
Create a contact menu with an email link, a phone link and a link to the contact page, all fanning out from a headset toggle.
Pin the circle menu to the bottom-right of the screen so it stays visible while scrolling, sitting 5% in from the right and bottom edges.

Show this one-liner as a highlighted JavaScript snippet: const greeting = ‘Welcome back, ‘ + user.firstName;
Add a CSS code sample with the dark Okaidia theme: .card { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
Display a PHP snippet on the Tomorrow Night theme, add_filter(‘the_content’, ‘nx_append_cta’); with the copy button reading “Copy snippet”, a copy icon, and “Snippet copied” after the click.
Show the command npm install –save nexter-blocks as bash, on the dark theme, with a yellow “Terminal” label on a charcoal strip above it.
Add a SQL example, SELECT id, title FROM wp_posts WHERE post_status = ‘publish’ ORDER BY post_date DESC LIMIT 5; on the light Solarized theme with line numbers switched on.
Add a Python snippet, print(‘Order total:’, round(sum(prices) * 1.2, 2)), with a “Download script” button (download icon) that links to https://example.com/downloads/order-total.py.
Show a JSON config line, { ‘name’: ‘nexter-blocks’, ‘version’: ‘5.0.7’ }, on the Twilight theme, centred.
Show a YAML line, image: wordpress:6.7-php8.3-apache, in the Funky theme with 24px padding all round and 16px space above and below.
Add a long JavaScript line that loops over every .accordion-item, but cap the code box at 120px tall with a thin blue scrollbar (8px) on a light grey track.
Show a Go print statement, fmt.Println(‘Server listening on :8080’), and restyle the Copy button as a green button with white text that fades to pale green text on hover.

Build a features row: put three info boxes (Fast Setup, Fair Pricing, Friendly Support) side by side with a 24px gap.
Stack a welcome message vertically and centre it horizontally in the middle of the container.
Create a two-column section: a feature description on the left and a pricing note on the right, each taking half the width.
Show a desktop-only promo banner: hide this container on tablets and phones, and give it a 20px gap between its items.
Give the section a pale blue background, 40px padding all round and 16px rounded corners.
Wrap the content in a white card with a thin grey border and a soft drop shadow.
Make the hero block at least 420px tall and centre its content both ways.
Make this a full-width section that uses a semantic section tag, with a dark slate background.
Make the whole promo block clickable so it opens the offers page.
Add a custom anchor ID of pricing and a class of pricing-band to the container, and shift its background on hover.

Add a button that says “Start your free trial” and links to /signup.
Add a “Read the documentation” button that opens https://example.com/docs in a new tab and is marked nofollow.
Add a centred “Book a demo” button.
Add a “Learn more” button with white text and a subtle dark text shadow so it stays readable on a coloured background.
Make a bright blue “Get started” button with white text that turns dark navy on hover.
Add a fully rounded pill-shaped “Join the newsletter” button with generous padding.
Add an outlined ghost button “View pricing” with a 2px green border, green text and a darker green border on hover.
Make the “Shop the sale” button text large and bold, 20px, in Poppins.
Give the “Request a quote” button a soft drop shadow so it looks raised off the page.
Add a right-aligned “Contact sales” button with underlined bold text that turns orange on hover.

Add a countdown to our New Year sale that ends on 31 December 2027 at midnight, showing days, hours, minutes and seconds.
Count down to our product launch on 15 March 2028 at 9am and use the short labels D, H, M and S under the numbers.
Show the countdown to our webinar on 20 June 2028 with the numbers only and no text labels.
Display the countdown on one line, with each number sitting next to its label, for a slim announcement bar.
Use the flip-clock style countdown with a light theme for our Black Friday deal ending 27 November 2027.
Use the circular progress ring countdown with a thick purple ring on a light grey track for our course enrolment deadline on 1 September 2028.
Put each countdown unit in its own dark navy box with white numbers and a thin yellow border.
Make the countdown numbers 48px and the labels 14px, and give each unit rounded 10px corners with 20px of padding.
Show a message saying the sale has ended once the countdown reaches zero.
Redirect visitors to our sale page when the countdown finishes.

Add a click-to-copy coupon button that says Show Code and reveals the code SPRING25 for a spring sale.
Create a coupon with the angled ticket look (style 2) offering FREESHIP on orders over $50.
Add a dashed-border coupon (style 3) for the code WELCOME10, with a small arrow pointing at the code.
Show a cut-out style coupon with a scissors icon (style 4) for the code BLACKFRIDAY30.
Use the animated scissors coupon (style 5) to reveal SUMMERSALE20.
Make the coupon open a popup with the title Your discount code, a short description, a Copy Code button and a Visit Store link to the shop.
Create a scratch-card coupon: the front says Scratch to reveal and the back reveals 25% OFF with the code SCRATCH25.
Create a slide-out coupon that slides to the right to reveal a back side with the code SLIDE15, with a direction hint.
Create a peel-back coupon where the sticker lifts to reveal 40% OFF with code PEEL40.
Style the coupon button in purple with white text, rounded corners and bold 18 pixel lettering, turning darker on hover.

Add a centred photo of our workshop, 480px wide.
Show a team photo that opens full size in a lightbox popup when clicked.
Make the product photo a link to the gallery page that opens in a new tab, with 24px rounded corners and a soft drop shadow.
Reveal the hero photo with a sliding colour wipe the first time it scrolls into view.
Crop the photo of the studio into the shape of our location pin using a mask.
Add a landscape photo with a parallax effect, so it drifts sideways slightly as the page is scrolled.
Use a tall website screenshot as a scrolling preview: the image slowly scrolls inside its frame when hovered.
Float a 320px photo to the left so body text can wrap around it.
Frame the photo with a 6px white border, a thin grey outline on hover and a gentle 12px radius.
Show the product photo with a shadow that deepens and a larger radius when someone hovers over it.

Add a promotional banner over a lifestyle photo: sub-heading “Up to 40% off”, heading “Summer Sale”, a one-line description and a “Shop the sale” button linking to /sale.
Make a banner for a new coffee range with no button, just the title “Single-origin Ethiopia” and a two-line description, with the text anchored top-right on a simple hover effect.
Create a product-box style banner: the photo as a background, heading, sub-heading and description inside, and a separate centred “Reserve your table” button underneath.
Banner with the image blurring slightly on hover: heading “Weekend Escape”, sub-heading “Book by Friday”, and a button that opens the offer page in a new tab.
Make the banner text white with a gold sub-heading and soft-grey description, over a dark 45% overlay that turns warm coral on hover.
Style the banner heading at 44px extra-bold and the description at 18px medium weight.
Add a banner whose card tilts toward the cursor on hover, with the headline “Design Week 2026” and a “Get tickets” button.
Give the banner a soft shadow that deepens on hover, with corners that are 20px rounded at rest and grow to 32px rounded on hover.
Right-align the “Join the waitlist” button on a banner in the third layout style, with heading, sub-heading and description.
Add a banner with a vertical image slide on hover in the sixth layout style, plus a CTA button in the 9th button style.

Add a light/dark mode switch with the default sliding toggle, labelled Normal and Dark.
Add a pill-style day/night switch with a pale grey track and amber knob that turns into a near-black track with a sky-blue knob in dark mode.
Add a round icon-only theme toggle that shows a sun in an amber colour and swaps to a pale-yellow moon in dark mode, 22px in size.
Add a dark mode switch that remembers the visitor’s choice between visits and ignores their operating-system theme.
Pin a dark mode toggle to the bottom-right corner of the screen so it follows visitors as they scroll, 3% in from the edges.
Add a dark mode slider with the left label “Light” in slate and the right label “Night” in near-black.
Add a large dark mode switch, scaled up to 72px so it is easy to tap on mobile.
Add a dark mode switch aligned to the right of its row.
Add a dark mode toggle that actually darkens the whole page when switched on: navy (#0f172a) page background with light slate text.
Add a dark mode switch with its “Normal” and “Dark” labels set in 16px text.

Add a pricing comparison table with three plans (Starter, Growth, Scale) and rows for monthly price, number of users and storage.
Show our upcoming workshop schedule as a table with date, topic, host and seat availability, and let visitors click a column heading to sort it.
Create a searchable team directory table with name, role, office and email so visitors can quickly find a colleague.
Create an invoice table with twelve rows and a dropdown that lets visitors choose how many entries to show per page.
Add a table of our delivery zones with a deep navy header row, white header text at 16px, and everything centred.
Show a class timetable where the cell under the mouse turns light blue with navy text and the heading cell turns navy with white text on hover.
Add a product specifications table with thin grey borders around every cell.
Build a leaderboard table where a row lights up in amber with dark text when the visitor hovers over it.
Make a roomy menu table with 18px of padding in the cells, middle-aligned content, 17px dark green text and a pale green heading band.
Add a searchable and sortable resource list, and give the search bar area a soft grey background with some padding.

Add an animated line-drawing icon that draws itself the first time it scrolls into view.
Animate my logo mark so it draws itself on the page. The SVG file is already in the media library.
Draw my house outline illustration in a warm terracotta colour (#c2410c).
Draw my logo mark with a deep blue outline and then fill it with a soft light blue once the drawing finishes.
Draw my house illustration with all lines appearing at the same time, quick and snappy at 40 frames.
Write out my handwritten signature SVG slowly and elegantly, over about 200 frames.
Place my logo mark on the left of the section and keep it small, no wider than 120px.
Show the house illustration on the right-hand side of the section at up to 300px wide.
Make my animated logo clickable so it opens our About page in a new tab.
Make the animated house illustration link to our partner site, mark the link nofollow, and draw it in dark navy.

Display our app’s dashboard screenshot within a phone frame.
Present my landing page screenshot inside a black MacBook frame, 60% wide and centred on the page.
Put the dashboard screenshot on a horizontal white iPad, and make a click on it open https://example.com/demo in a new tab.
Show our live website inside an iMac frame, with the page loading as an embedded preview titled “Live site preview”.
Display my long landing page screenshot in a laptop frame so that it scrolls slowly down the screen when someone hovers over it, taking about four seconds.
Show the app on a phone and float a small award badge over the screen with a gentle floating animation, badge 60px wide.
Show the app on a black Galaxy-style phone and make the screen link to our Google Play listing at https://example.com/play, marked nofollow.
Build a swipeable carousel of three phone screens (Home, Tasks and Reports) that autoplays with navigation dots.
Show the tablet mockup right-aligned with 24px of space above and below, and round the screen corners by 12px.
Fit a MacBook mockup in a narrow column: 420px wide, with the screen image nudged 4px down.

Add an About our studio section that shows only a short preview of the story and a Read More button to reveal the rest.
Show a trimmed FAQ answer about delivery times and change the button to say “Show full details” when closed and “Hide details” when open.
Add a long product description that keeps 120px visible, with the Read More button centred and its arrow after the label.
Add a Watch Video button next to the toggle that links to https://example.com/studio-tour in a new tab.
Fade the bottom of the collapsed text into a white background, using a 60px fade.
Make the title an H2 in navy, centred, with 16px below it.
Style the Read More button in brand green with white text, darker green on hover.
Give the toggle a thick 3px blue outline on a white background, with generous padding around the label.
Set the body text to 17px dark grey and the label of the toggle to bold 15px uppercase.
Make the text open slowly over 600 milliseconds, keep 150px visible, set an accessible label on the toggle and right-align it.

Add a flip card for our Free Consultation service. The front shows a handshake icon and the title, and the back reveals a short description when someone hovers.
Make the Our Process card flip vertically (top to bottom) instead of sideways.
On the back of the Web Design card add a Learn more button that opens our services page in a new tab.
Make the flip card exactly 340px tall so a row of them lines up evenly.
Give the Branding card a deep navy front and a bright teal back, both with white text.
Add a light grey border and 20px rounded corners around the Support card.
Put the rocket icon on the front inside an orange circle, 36px with a white glyph.
Show my custom check-badge SVG on the front of the Verified Partner card.
Set the card title as an H3 at 26px in dark slate, with a 12px gap below it, and make the description light grey on a dark back.
Left-align the back text of the Pricing card with 30px padding, and style the button with a white label on a green background.

Add a map showing our Berlin studio near Brandenburg Gate, zoomed in close, with a pin that shows ‘Brightlabs Studio, Pariser Platz 1’ when clicked.
Show a map of our three European stores in London, Paris and Amsterdam, each with its own pin.
Pin our headquarters on the map using its street address, 1600 Amphitheatre Parkway, Mountain View, rather than coordinates.
Switch the map to satellite imagery so visitors can see the roof and surroundings of our office.
Use the terrain map type for our hiking trailhead location in Zermatt, at a mid-range zoom.
Make the map taller, 480px, so it works as a big feature on our contact page.
Make the map static: switch off mouse-wheel zoom and dragging so it doesn’t hijack scrolling on mobile.
Show a clean map for our Sydney shop with the zoom buttons, street view, fullscreen and map-type switcher all hidden.
Give the map a dark, night-mode style that matches our dark website theme.
Use our own coffee-cup pin image instead of the default red marker.

Add a main page headline that says “Plan your dream trip to Portugal” as an H1.
Add a centred H2 section heading “What our customers say”.
Add a heading “Explore the 2026 collection” that links to /collections/2026 and opens in a new tab.
Make the heading “Fresh baked every morning” dark brown.
Add a big bold heading “Design that works” in Playfair Display, 56px, with tight letter spacing and a 1.1 line height.
Add an outlined heading “OUTDOOR ADVENTURES” with a 2px orange text stroke and no fill colour.
Give the heading “Neon Nights” a glowing pink text shadow.
Add an H2 heading “Frequently asked questions” with an anchor ID of faq so I can link straight to it.
Add an underlined heading “Limited time offer” that is centred on desktop but left aligned on mobile.
Add a white heading “Dive into the deep” that blends with the image behind it using the difference blend mode.

Add a hero headline that reads “Websites that feel fast” with the word “fast” underlined by a hand-drawn line.
Write “Our customers love us” and draw a wide hand-drawn circle around the word “love”.
Add the heading “Save 40% this weekend” with “40%” marked by an orange zigzag line, 6px thick.
Show “Free shipping on every order” with a green check-mark stroke under the word “every”.
Cross out the old price in the line “Was $99, now $59” with a red double strike, and highlight the sentence in dark grey text.
Add a big left-aligned 48px headline “Design with confidence” where “confidence” gets a curly underline in purple.
Add a headline “We make [logos / websites / brands] that last” whose middle word rotates through the three options with a typing-style animation.
Make a rotating headline “Built for [designers / developers / agencies]” where each word flips in letter by letter.
Create a rotating headline with a coloured, bold animated word in blue: “Shop [shoes / bags / hats] online”.
Make the rotating words “fresh / local / seasonal” in a headline slide in with a pink underline beneath them.

Add a section heading “Handmade ceramics for everyday living” as an H2 with the supporting line “Small-batch pottery from our studio in Lisbon” below it and a small “New season” tag next to the title.
Add a “Summer Sale” heading with an “Up to 50% off” tag placed in front of it, the title sitting in a pale amber rounded box (12px by 24px padding, 10px corners), and the line “Ends this Sunday at midnight” underneath.
Add a left-aligned heading with the supporting line “What we do best” sitting above the title “Our Services”, a “Since 2012” tag, navy title, slate subtitle, orange tag, and an anchor id of services for jump links.
Add a “Meet the Team” heading with an orange 3px divider line (80% wide) between the title and the subtitle “The people behind the product”.
Add a “Why Choose Us” heading with a split divider that has an orange dot in the middle of blue lines, subtitle “Three reasons customers stay”.
Add an “Our Story” heading framed by two 40px vertical accent lines (one above, one below) with “Since 1998” as the subtitle.
Add a heading “The complete beginner guide to growing herbs on a sunny windowsill” trimmed to its first five words with an ellipsis, and the subtitle “Everything you need to get started”.
Add a heading “Read our 2026 sustainability report” that links to https://example.com/reports/2026 in a new tab with nofollow, subtitle “Open the full PDF”.
Add a bold 56px “Build faster” heading filled with an orange-to-pink gradient, subtitle “with ready-made blocks” and a “Beta” tag.
Add an animated headline “Design that moves people” whose words reveal one by one.

Using the team workspace photo, drop two pulsing pins: one on the standing desk that says “Height-adjustable standing desk” and one on the chair that says “Ergonomic mesh chair”.
Number three points of interest on the workspace photo 1, 2 and 3 with text pins, each revealing a short note on hover.
Replace one pin with a small round customer avatar image that explains “Maria, our office manager” when hovered.
Make the pins open their tooltip on click instead of hover, using the dark tooltip theme.
Show the tooltip below the pin, without an arrow.
Style the pins as white icons on a blue circle that turns orange when hovered, with a blue pulse.
Use larger 48px pins with fully round corners and a soft drop shadow.
Make the pin float gently up and down instead of pulsing, and keep the tooltip text coloured dark red and left aligned.
Darken the photo with a navy overlay when the visitor hovers over it so the pins stand out.
Position a pin from the bottom-right corner of the image, 10% from the right and 15% from the bottom, with a tooltip limited to 220px wide.

Add an info box titled Free Shipping that explains every order over $50 is delivered in 3 to 5 days.
Show a truck icon above the Fast Delivery title on a solid blue tile with a white icon.
Make a left-aligned feature card about secure payments, with the title as an H3 heading and the text as a paragraph, so it is good for SEO.
Use my team workspace photo instead of an icon at the top of the Our Studio info box, 120 pixels wide with rounded corners.
Create a numbered step card: show the number 01 instead of an icon, with the title Create your account.
Add a small Most Popular badge in the corner of the Pro Plan info box with a dark orange background and white text.
Turn the whole Read Our Guides info box into a clickable card that opens the guides page in a new tab.
Make the Business Hours info box at least 280px tall with its content vertically centred, and fade the card background to light blue when someone hovers over it.
Style the Customer Support info box as a white card with a light grey border, 16px rounded corners, 30px padding and a soft shadow.
Use a dark navy title at 24px and a slate grey description at 16px, then turn the title and icon teal when someone hovers the card, and add a short underline below the title.

Show our four-step delivery process as a ring of icons around the edge, with the step title and description appearing in the middle as you point at each icon.
Make a weekday planner as a circle of three icons that reveals its details on click rather than hover, and start with Tuesday already open.
Build a self-playing circle of three steps (Plan, Do, Review) that moves to the next step by itself every two and a half seconds.
Add a pricing circle with two plans, where each plan shows a button linking to its own page and the Team button opens in a new tab.
Introduce our team as a circle of three round photos, each one revealing the person’s name and role in the centre.
Give a three-stage circle a spinning entrance animation so the icons whirl into place when the block loads.
Colour the icon bubbles a soft indigo that deepens on hover, with white icons for the hovered and selected states.
Put the revealed text on a warm amber panel with a brown title, a darker brown description and 20 pixels of padding all around.
Enlarge the circle to 420 pixels, make each icon bubble 70 pixels with 28 pixel icons, and set the small icon labels at 13 pixels in slate.
Outline the icon bubbles with a 3 pixel sky-blue border and rounded 20 pixel corners, turn the label raspberry on hover, and set the revealed title at 26 pixels.

Add a sign-in form for my members area titled Welcome back, with the fields labelled Email or username and Password and a Sign in button.
Create a registration form headed Join the community that asks for first name, last name and email, with a Create my account button.
Build a password reset form with the heading Forgot your password and a Send reset link button.
When a member is already signed in, show their account card with a My profile link and a Sign out button instead of the form.
Show just a Member login button that opens the sign-in form when clicked.
Send members to their account page after they sign in, and show the message Welcome back, you are in when it works.
Centre the sign-in form, cap the Sign in button at 220px wide, and make it coral with white 16px text.
Style the form with navy labels, light grey input backgrounds and 14px rounded inputs with a thin border.
Use 15px label text and 14px input text, with a soft shadow under each input.
Give the form breathing room: 14px space around each input and 24px above the Sign in button, with 14px 28px padding inside the button.

Add a looping Lottie animation of a pulsing app icon, loaded from my uploaded animation file, centred on the page.
Play the animation faster, at one and a half times its normal speed.
Play the animation exactly three times and then stop.
Only start the animation when the visitor hovers over it.
Make the animation play when someone clicks it, and play only once.
Start the animation only once it scrolls into view, and pause it again when it leaves the screen.
Add a caption under the animation: a heading “Instant sync” and the description “Your files stay up to date on every device.” in navy and slate grey.
Make the whole animation a link to /features that opens in a new tab.
Show the animation left-aligned at a maximum of 150px wide.
Play just the middle section of the animation, from frame 10 to frame 40, using the canvas renderer.

Add a newsletter signup to the footer with just an email box and a Subscribe button, connected to my Mailchimp audience.
Make a welcome-list signup that asks for a first name and an email, with a person icon and an envelope icon in the fields and a ‘Join The Club’ button.
Build a full registration form for our loyalty club asking first name, last name, birthday month and day, and mobile number, plus the email, with a ‘Become A Member’ button.
Turn on double opt-in for the signup so subscribers have to confirm by email, and tell them ‘Almost done! Open the email we just sent and confirm your address.’ when they submit.
Write friendly status messages for the form: ‘Adding you now…’ while it sends, ‘That email does not look right.’ for typos and ‘You are in! Check your inbox.’ on success, with a blue loading bar and a green success bar in white text.
After someone subscribes, send them to my thank-you page at /thank-you/.
Add a required consent checkbox saying ‘I agree to receive monthly emails and can unsubscribe any time’, with a teal tick box and an error ‘Please tick the consent box before subscribing.’ if it is left empty.
Automatically tag everyone who signs up through this form in Mailchimp with ‘website-signup’ and ‘spring-promo’ so I can segment them later.
Style the input boxes: pale grey fill that turns white on focus, 16 pixel text, generous padding, rounded 10 pixel corners with a slate border that becomes a 2 pixel teal border on focus, and a soft shadow.
Style the subscribe button as a bold uppercase teal button with white text, rounded corners, a glowing teal shadow and a darker teal on hover.

Build a three-column photo gallery for our coastal road trip, with a title and one-line caption on every picture.
Make a portfolio grid of six travel photos where visitors can filter by Coast, Town or Nature using a category bar labelled “Everything”.
Show the photos in a masonry-style wall that has the second caption design with the title sliding in over the image.
Lay the gallery out as a metro mosaic with the third caption style so some tiles feel bigger than others.
Turn the gallery into a sliding carousel that shows three photos at a time on desktop, two on tablet and one on phones.
Create a video gallery of two YouTube clips about our workshop, with a custom cover picture for each clip.
Give every photo a dark navy overlay on hover, round the image corners to 14 pixels and use the zoom-style hover effect.
Style the captions: titles in deep teal that turn orange on hover, descriptions in slate grey, with 10 pixels of space under each title.
Open photos in a lightbox that shows a thumbnail strip, fades between pictures, and displays each title under the photo.
Swap the magnifier on hover for a plus icon, make it white and 28 pixels, and turn it amber when hovered.

Add an alert banner at the top of the page saying “Free shipping on all orders over 50 dollars this week.”
Add an info box titled “Scheduled maintenance” with a description saying the site will be offline on Sunday from 2am to 4am UTC.
Add a green success message “Your payment was received” with a light green background, green border and a check icon.
Add a yellow warning “Your subscription expires in 3 days” with a warning triangle icon on the right-hand side of the message.
Show a clean announcement “We have moved to a new address” with no icon and no close button.
Add a dismissible cookie notice message with a small X button that visitors can click to close it.
Add a message box with the speech-bubble pointer arrow hidden.
Make the message title 20px bold and the description 15px so it looks like a proper notification card.
Style the message as a card with 20px padding, a soft blue background, rounded corners and a gentle shadow.
Add a round red icon badge to the message and make the box turn light pink when hovered.

Put a shopping cart icon with an item-count badge in the header; clicking it slides open a cart drawer.
Use a labelled Basket button instead of the icon to open the cart drawer.
Keep the cart icon but hide the number badge.
Style the Basket button as a teal pill with white bold 15px text that darkens on hover.
Make the cart icon larger on a soft grey circle, with a red round badge, turning teal on hover.
Widen the cart drawer to 420px, give it an amber-cream background with a dark overlay, and a brown header with a white title and round close button.
Restyle the cart line items with 72px rounded thumbnails, charcoal titles that turn amber on hover, green prices and light separators.
Make the quantity steppers in the drawer light grey with square-ish corners that turn black on hover, and the remove icon grey turning red.
Style the drawer footer: a pale grey area with the subtotal in charcoal, an outlined View Cart button and a solid green Checkout button.
Set the drawer typography: a bold 22px title, 16px semibold product names, bold prices, a large bold subtotal and uppercase footer buttons.

Add a mobile app-style bottom tab bar with Home, Shop, Cart and Account, each with a matching icon.
Pin that tab bar to the bottom of the screen so it stays visible while visitors scroll.
Show a red badge with the number 3 on the Cart tab to flag items waiting in the basket.
Use the centred layout: Home and Orders on the left, Wishlist and Account on the right, and an Add button in the middle.
Put a profile photo instead of an icon on the last tab.
Let the tab bar scroll sideways for a long list of categories: Home, Shop, Deals, Blog and Help.
Make the icons coral and 22px, and flip the active tab to a navy background with white icon and text.
Set the tab labels in small 13px grey text on a white bar with comfortable 10px padding.
Give each tab a light grey border, 12px rounded corners and a soft shadow so they look like little cards.
Add a small coral dot indicator that marks the tab you are on.

Replace the normal arrow on my page with a precise crosshair cursor.
Add a custom cursor image: use my orange dot graphic as the pointer everywhere on the page.
Make a blue circle follow the mouse around the page, 50px across.
Use a circular scroll-progress cursor: a thin grey ring that fills with purple as the visitor scrolls down.
Add a white circle cursor that inverts the colours of whatever it passes over.
Show a small floating label that says “View project” next to the cursor, white text on a black pill.
Make the floating label say “Drag to explore” and switch to “Read article” whenever the cursor is over a link.
Let a small product thumbnail follow the mouse instead of the arrow, offset 20px right and 20px down.
Make the orange follow circle react to buttons and anything with the btn class, instead of only links.
Show a custom circle cursor only inside the block above it (not the whole page), 60px wide, growing to 1.6x over links.

Build a customer account page with a profile header and the usual WooCommerce account tabs.
Hide the profile header so the My Account page shows only the navigation tabs and content.
Show the customer avatar as an 80px circle with a 20px gap below it and navy name and email text.
Lay the account navigation out horizontally across the top instead of down the side.
Make each account tab a soft grey pill with dark text, 10px rounded corners and roomy padding.
When someone hovers over or opens an account tab, turn it navy with white text.
Give the account content area a white card look: thin grey border, 12px corners and 24px padding.
On the Orders tab, style the orders table with a dark green header, white header text and light grey body rows.
Turn the View button in the orders list orange with white text, rounded corners, and a darker orange on hover.
Restyle the Account Details form: bold navy labels, inputs with a grey border and 8px radius, and a navy Save changes button.

Show 2,500 as a number that animates up from zero, labelled Happy Customers, with a plus sign after it.
Show a customer satisfaction percentage that counts up from 0 to 98 with a percent sign.
Show money raised as a counter with a dollar sign in front of the number, counting up to 1,250,000 with thousands separators.
Put the icon on the left of the number and title, with the text left-aligned, for a stats row in a company overview.
Show the icon in a solid purple circle with a white icon above the number.
Make the counter number huge at 72px in bold orange so it is the first thing visitors notice.
Style the label under the number: dark grey, 18px, with 12px of space above it.
Start the counter at 100 and count up to 500 one number at a time over about four seconds.
Make the whole counter a link to our case studies page and give it an accessibility label.
Place the counter on a white card with 30px padding, rounded corners and a soft shadow, turning light purple on hover.

On my order-received page, show a confirmation that says “Order no. ” followed by the order number and the message “Thanks for shopping with Fernhill Goods – your parcel is being packed.”
Make my order confirmation show only the thank-you sentence and hide the order number heading.
Show just the order number on the confirmation page and drop the thank-you message underneath it.
Style the order number heading in deep navy at 30px so it stands out on the confirmation page.
Turn the thank-you message green at 18px so customers see their order went through.
Set the order number heading in bold capitals with a little letter spacing, like a receipt header.
Make the thank-you line italic with comfortable line spacing so it reads like a personal note.
Leave 28px of space under the order number heading and colour it burnt orange.
Set the order number in 26px Poppins and the thank-you line in 16px Poppins.
Brand the confirmation: a 32px forest-green order number with a 12px gap, and a 16px slate-grey welcome message under it.

On the thank-you page, show the order number, date, email, total and payment method as a list.
Stack the order details vertically, one under another, on the thank-you page.
Rename the order rows to “Order no.”, “Placed on”, “Sent to”, “Paid” and “Paid via”.
Make the order labels grey and the values dark green.
Give each order detail item a 1px grey border with 8px radius and 12px by 16px padding.
Leave 24px between the order detail items.
Make order labels 13px uppercase.
Make order values 18px bold.
Put 6px of space above each order value in the stacked layout.
Separate order items with a dashed amber line.

Add an order summary table to the checkout headed “What is in your order”.
Show the order review table with no heading above it.
Put the order review heading in dark blue on a light blue background.
Make the order review heading 24px bold with 16px of space below.
Draw a 2px green border around the order heading with 8px radius and 10px by 16px padding.
Style the order table head: white text on charcoal, 12px by 14px padding.
Make order table item names dark brown and prices green on a cream background with 14px padding.
Add a light grey 1px line between order rows.
Colour the order total label in navy and the total amount in bold red.
Set order item text to 15px, item prices to 15px semi-bold, total label 18px and total price 20px bold.

Add the checkout payment options under the heading “How would you like to pay?”.
Show the payment methods without a heading, and change the privacy line to “We only use your details to process this order.”
Make the place-order button fit its text instead of stretching across the full width.
Style the payment heading in dark purple on a lavender background, centred.
Make the payment heading 26px bold with a 2px border, 8px radius, 10px by 16px padding.
Style payment option labels: dark text on light grey, 1px border, 12px padding, 8px gap.
Make the payment option labels 16px semi-bold.
Style the payment description box: pale blue background, navy text, 18px padding.
Colour the payment description text grey with green links turning dark green on hover, 10px margin.
Make the place-order button solid orange with white text, dark orange on hover, centred, pill-shaped, 14px by 36px padding.

Show the author box for this article with the writer’s photo, name, role and short bio.
Show who wrote this article using the second author card layout, with their photo, name and bio.
Use the second author card layout at the end of this post, centred and no wider than 520 pixels.
Add a compact author line to this post: just the photo, name and bio, no role label and no social links.
Add a plain byline for this article that only shows the writer’s name, with no picture, role, bio or social icons.
Show the author’s name and bio only, without the profile picture.
Make the author name large and bold in a deep navy, 26 pixels, with the bio in a softer grey.
Show the author picture as a 96 pixel circle with a soft shadow.
Put the author bio in a card with generous padding, a thin teal border and rounded corners.
Style the author card so that on hover the border turns burgundy and the name and role colours deepen to burgundy too.

Show the comments on this post, with the reply form underneath.
Retitle the comment area “Reader Comments” and the form “Join the conversation”.
Change the comment box placeholder to “Share your experience…” and the send button to “Post comment”.
Make the comment text 17 pixels in dark grey.
Show commenter names in bold navy with a teal hover, and the dates in a pale grey.
Make the commenter profile pictures round with a soft shadow.
Style the Reply links as small outlined purple pills with a lilac fill, turning deeper purple on hover.
Give the comment form fields padding and a thin rounded grey border that turns teal when hovered.
Style the submit button in dark green with 16 pixel white text, rounded corners and generous padding, with the text softening to mint on hover.
Add a soft shadow to the submit button that lifts higher on hover.

Show this post’s summary text.
Show the post’s hand-written summary, centred on the page.
Show the post summary justified, like a magazine standfirst.
Show the post summary in 20 pixel dark grey text with a slightly lighter grey on hover.
Show the post summary in Merriweather serif at 18 pixels.
Put the post summary in a callout box with 20 pixel padding.
Add a left accent border in indigo to the post summary.
Show the post summary in a rounded card with a soft shadow.
Show the post summary with a pale background that turns pale green when hovered.
Show the post summary with a border that turns teal and gets rounder on hover.

Show this post’s featured image.
Show the featured image centred and no wider than 480 pixels.
Show the featured image as a medium-sized picture aligned to the right.
Show the featured image with a thin grey outline and softly rounded corners.
Show the featured image with a soft drop shadow beneath it.
Let readers click the featured image to open it larger in a lightbox.
Show the featured image as a rounded picture whose corners tighten and whose border turns orange on hover.
Use the featured image as the background of the section this block sits in, covering the whole area.
Use the featured image as a fixed, parallax-style background behind the page with a dark tint over it.
Show the featured image with a faint shadow that grows deeper and spreads wider when a reader hovers over it.

Show our latest six blog posts in a three-column grid, each with its featured image, title, date and author.
Add a list of four articles sorted alphabetically by title, in two columns.
Show three posts but skip the two newest ones, so the featured articles at the top of the page aren’t repeated.
Display three posts with a short excerpt under each title, and hide the date and author so the cards look cleaner.
Show three posts with the author line reading ‘Written by’ instead of ‘By’, and without the author’s profile picture.
Show each post’s category as a small orange label above the title, 13px text.
Use the card style with the excerpt and a ‘Continue reading’ button under each post, in a dark button with white text.
Lay the latest posts out as a magazine-style metro grid with one large feature tile.
Add a blog grid with clickable category tabs above it so visitors can filter the posts by topic.
Style the post cards: a light grey border, rounded 12px corners, 18px of inner padding, and bold 22px dark navy headings that turn blue on hover.

Add an info bar under the post title showing the date, category, author and comment count.
Show only the publish date and the author in the post info bar.
Centre the post info bar and separate the items with an orange bullet.
Show the date the post was last updated, with no label in front of it.
Add an estimated reading time to the post info bar.
Add small icons to the post info: a calendar by the date, a speech bubble by the comments and the author’s round profile picture.
Switch the post info bar to its second layout.
Make the post info text 14 pixels in slate grey, with the author name in navy and the category in teal that turns darker on hover.
Show the post category as a rounded outlined tag with some padding around it.
Wrap the post info bar in a bordered box with padding, rounded corners and a border that turns blue on hover.

Add previous and next post links at the bottom of this article.
Change the post navigation labels to “Older article” and “Newer article”.
Use the second post navigation layout, with arrow icons beside the previous and next titles.
Use the third post navigation layout, with the neighbouring posts’ pictures as full backgrounds and at least 220 pixels of height.
Use the fourth post navigation layout.
Only link to neighbouring posts from the same category as this one.
Make the “Previous Post” and “Next Post” labels small, grey and uppercase, turning orange on hover.
Make the neighbouring post titles bold navy 18 pixel text that turns blue on hover.
Round the corners of the thumbnails in the navigation and give them a thin grey outline.
Turn the previous and next links into light cards with rounded corners that go pale blue when hovered.

Show this post’s title as the page headline.
Show the post title as a left-aligned H2.
Put the word “Guide” in front of the post title and “2026 edition” after it.
Make the post title a link to the post itself, as an H3.
Show the post title as normal paragraph text, aligned to the right.
Set the post title in Playfair Display at 40 pixels, bold.
Make the post title 44 pixels, extra bold, in dark slate with a deep green hover colour.
Give the title some breathing room: padding around it, a bottom border in orange and softly rounded corners.
Show the post title with a small “New” label before it, styled as a white-on-red tag with a little space after it.
Put the post title on a pale yellow highlight that turns a stronger yellow on hover.

Show a dark full-screen loading screen with the message ‘Preparing your dashboard…’ in white text while the page loads.
Play a looping Lottie pulse animation, 200 pixels square, as the loader on a white screen, using the JSON file from my media library.
Use a big spinning circle-notch icon in teal on a near-black loading screen.
Show my brand logo, 120 pixels wide, centred on a clean white loading screen.
Add a thin striped teal progress bar as the loader, 6 pixels tall and 320 pixels wide, on a white screen.
Show a big percentage counter that counts up to 100 with the words ‘Loading’ before it and ‘complete’ after it, in indigo on a white screen.
Use a circular progress ring in coral over a pale coral track, with a thicker 8 pixel stroke, on a white loading screen.
Put the loader inside a white rounded card, 360 pixels wide with generous padding and a soft shadow, sitting on a dark navy screen.
Keep the loading screen visible for at least 1.5 seconds but never more than 6 seconds, even on a slow connection.
Make the loading screen slide in from the top and slide away to the bottom, and also show it again when visitors click through to another page.

Add a cafe menu item for a Classic Cappuccino at $4.50 with a one-line description and Small, Medium and Large size tags.
List a 60-minute deep tissue massage at $90 for a spa price list with 30, 60 and 90 minute options as tags.
Show the dish name and price on a card that flips vertically on hover to reveal the dish description on the back.
Add a round photo of the dish next to the name, price and description of a menu item.
Put a dotted grey line between the item name and its price, like a classic restaurant menu.
Make the price stand out in a green rounded badge with white text and give the item name a dark charcoal colour.
Set the item name to 24px, the price to 22px and the description to 15px for easier reading on a printed-style menu.
Center everything in the menu item so it works in a single-column menu layout.
Wrap the menu item in a light cream card with 24px padding, rounded corners and a thin tan border.
Make a flip-on-hover menu card with a white front and a warm orange back that carries a soft shadow when the visitor hovers over it.

Add a pricing card for our Starter plan at $19 per month for freelancers, with a one-line summary of what is included and a note about the free trial under the price.
Show the Business plan at $49 a month with the old price of $79 struck through next to it so visitors see the saving.
Add a Most Popular ribbon to the Pro plan card so it stands out from the others.
Put a rocket icon in a purple circle at the top of the Launch plan card.
Make the plan card dark navy with white text and a bright yellow price so it looks like a premium tier.
Make the price big at 64px and the plan name 26px so the numbers are the first thing people see.
Give the pricing card rounded 16px corners, a light grey border and a soft drop shadow.
Use the layout where the plan name and price sit in a light purple header block above the features, with 40px of padding inside the header.
Make the card turn purple with white text when a visitor hovers over it.
Left-align the feature text, separate it from the price with a thin line and put a short note at the bottom of the card.

Add an About Us section with the title “Our story” and a short paragraph about a family-run coffee roastery founded in 2012.
Add a plain paragraph about our return policy with no title above it.
Add an H2 title “Why choose us” above a short justified paragraph.
Lay out my article intro in two columns with a comfortable gap between them.
Start a magazine-style article with a large drop cap on the first letter in deep red.
Use a framed drop cap with a navy fill, white letter, rounded corners, a thin border and some space before the text.
Set the paragraph text in charcoal and the title in dark teal so the section reads clearly on a white page.
Make the title 36px and the paragraph text 18px so the section is easy to read.
Give the title a soft glowing text shadow and leave 20px of space between the title and the paragraph.
Add a short note with a span title and a div paragraph, with the paragraph in grey and a subtle text shadow.

Show how we work with a four-step process: Discovery call, Design sprint, Build and review, Launch and support, each with a one-line description.
Give each step in my onboarding timeline its own icon: a user for sign up, a gear for configure, and a rocket for go live.
Show a big coral number 1, 2, 3 next to each step of my recipe tutorial.
Use a centred, stacked layout for my three-stage hiring process, with the icon and text centred above each other.
Label each step with words instead of icons: ‘Phase 1’, ‘Phase 2’ and ‘Phase 3’ beside the headings of my roadmap.
Make the icons big white symbols on round coral badges with a soft shadow, joined by a dashed teal line.
Tag each step with a navy pill that reads Step 1, Step 2 and Step 3 in white text.
Turn each step into a white card with a light grey border, rounded corners and 20px padding.
Set the step titles in bold 22px navy, the descriptions in 15px grey, and turn the title orange when someone hovers over a step.
Make each step title a link to its own help article that opens in a new tab, and mark the Customise link as nofollow.

On the Hand-Poured Beeswax Candle product page, show a single add-to-basket button labelled Add to Basket with no quantity box.
Let shoppers pick how many candles they want: add a quantity field with plus and minus buttons next to the Add to Cart button.
Put the plus and minus buttons on the left of the quantity box, make the box 90px wide with rounded corners and brown numbers, and add 16px of space before the button.
Style the quantity stepper: round pale-grey plus and minus buttons, 18px icons, that turn peach with a dark brown icon on hover.
Show the Merino Crew Sweater with colour circles and size buttons, and rename the clear link to Reset choices.
Turn the Add to Cart button deep teal with white text, darkening on hover.
Make the cart button a pill with generous padding and bold 16px uppercase lettering.
Make the colour swatches 40px rounded squares with a light grey ring that darkens on hover and turns thick black when chosen.
Restyle the size buttons as light grey tiles with a thin border that go solid black with white text when selected.
Give the option labels (Color, Size) a bold uppercase 15px style, more space between the swatches, and a soft red pill-shaped Clear link.

Put a compare icon with a live item-count badge in my shop header; clicking it opens a side-by-side product comparison popup.
I want a plain compare button rather than a count badge, so show just the compare icon with a ‘Compare’ tooltip that opens the comparison popup.
Style the compare icon as a teal pill with white icon that turns dark teal on hover and rose red once products have been added; make the icon larger.
Make the item-count badge on the compare icon a small bold white-on-red circle that darkens when the icon is hovered.
Restyle the comparison popup: make it 1100 pixels wide with white background, rounded 18 pixel corners, a dim navy backdrop, and a light grey header with a bold 22 pixel dark title, a teal compare icon and a teal count pill.
Give the popup a dark round close button that turns red on hover, and make the Clear All button red text on white that fills red on hover.
Format the comparison table with light slate borders, roomy cells, soft grey attribute label cells in slate text, and pink remove buttons that turn solid red on hover.
Style each compared product: bigger rounded photos, dark titles that turn teal on hover, teal regular price with red sale price, green in-stock and red out-of-stock text, and a teal Add to Cart button.
Customise the ‘add a product’ picker window: black translucent backdrop, white rounded panel, hover-tinted rows with thin separators, 56 pixel thumbnails, and teal Add buttons that turn green once a product has been added.
Set the typography inside the comparison popup: 16 pixel semi-bold product names, 18 pixel bold prices and small uppercase attribute labels.

Show six of our products in a three-column grid with prices and an Add to basket button.
List our products A to Z in two columns, and label unavailable items Sold out.
Use the overlay card style for the product grid and show each product’s category, price and star rating.
Turn the product grid into a sliding carousel using the minimal card style with prices.
Arrange the products in a metro mosaic with one large feature tile.
Add a centred category filter bar above the product grid so shoppers can narrow by Clothing, Accessories or Home.
Skip the first two products alphabetically and show the next four in a row of four.
Page the products with numbered pagination, three per page.
Give product names a bold 18px charcoal style that turns amber on hover, with 10px gaps between the cards.
Hide the sale and out-of-stock badges and keep the product image still on hover.

On my product page add a small eye-icon button that opens a quick preview window of the product, so shoppers can see details without leaving the page.
Add a quick view trigger as a dark circular button with a white eye icon that turns rose red on hover.
Give the quick view button a clean white look with a thin navy outline, rounded corners and a soft drop shadow.
Make the quick view popup wide, 960 pixels, with a warm cream background, 20 pixel rounded corners and a dark translucent backdrop behind it.
Restyle the popup’s close button as a round dark button with a white cross that goes teal on hover.
In the quick view popup show the product name large and bold in deep navy, the regular price in teal and the sale price in bright red.
Style the Add to Cart button inside the popup in teal with white text and rounded corners, darkening on hover, and make the Buy Now button a black one that turns orange on hover.
Show the stock status in the popup as a green pill with dark green text.
Tune the popup photo gallery: round the main photo’s corners, make the thumbnails 64 pixels square and outline the selected thumbnail in orange.
Colour the product meta, the share icons and the ‘view full product’ link in the popup so they match a teal brand: teal share buttons that turn dark on hover.

Add a heart icon with a live counter to the site header so shoppers can open their saved-products list in a popup.
Instead of a counter, I want a simple heart button that opens the wishlist popup when clicked.
Set the wishlist typography: 17 pixel semi-bold product names, 16 pixel bold prices, small uppercase stock tags and a 14 pixel bold Add to Cart label.
Colour the header heart icon rose with a soft pink circle behind it, a deeper rose on hover, and make it a little bigger.
Style the wishlist button as a round rose-red button with a white heart that darkens on hover and turns black once the list has items.
Turn the wishlist counter into a small bold white-on-rose circle that goes darker when the heart is hovered.
Make the wishlist popup 560 pixels wide with rounded corners and a dim navy backdrop, a pale pink header with a bold 22 pixel burgundy title, and a round dark close button that turns rose on hover.
Style the saved items: 72 pixel rounded thumbnails, dark names that turn rose on hover, teal prices with rose sale prices, green in-stock and red out-of-stock tags, a faint pink row hover, and a teal Add to Cart button on each row.
Restyle the popup footer: light grey bar, slate ‘continue shopping’ link that turns rose on hover, and a black ‘Add All to Cart’ button with rounded corners.
Design the empty wishlist state with a pale rose heart illustration, slate message text, a rose ‘Continue Shopping’ button, and a dark toast message that pops up when a product is added to the wishlist.

Show a skill bar for “Responsive web design” filled to 85 percent, with the note “Mobile-first layouts” underneath the title.
Add a medium-thickness progress bar called “Content writing” (note: Blog posts and documentation) at 70 percent, but hide the percentage figure.
Create a chunky progress bar where the title sits inside the bar itself: “Course completion” at 64 percent.
Build a slim alternative-style bar for “SEO audits” at 60 percent, filled in green over a light grey track.
Make a rating bar that reads “/10” in front of the number: “Customer rating”, 9 out of 10, blue fill, pale blue track and a navy end marker.
Add a “Figma prototyping” bar at 80 percent with a dark 22px title, grey sub-text, blue number, a pale grey percent sign, 10px spacing around the title and 30px of space above the bar.
Show a circular pie chart at 90 percent titled “Customer satisfaction” with the caption “Based on 1,200 reviews”, 220 pixels wide with a 12 pixel ring.
Create an orange-to-pink gradient ring chart for “Platform uptime” at 65 percent that fills in reverse, with the title and caption to the right of the ring.
Add a ring chart for “Storage used” at half full with a bordered circle, a pale grey empty ring and a teal fill.
Make a ring chart for “Quarterly target” at 75 percent whose centre number is large, bold purple and followed by a “pts” label.

Add a reading-progress bar fixed to the top of the page that fills with orange as visitors scroll through the article.
Pin a thick 8px scroll-progress bar to the bottom of the screen that fills from right to left, orange on a light grey track.
Show a slim 6px reading bar in violet with a lavender track, a thin lilac outline and softly rounded ends.
Add a top scroll bar that also shows a live percentage readout while the visitor reads, in white 14px text on a dark label.
Show the reading progress as a plain percentage that travels with the bar, in dark slate text.
Add a vertical progress bar down the left edge of the screen that fills green as the page is scrolled.
Put a vertical scroll tracker on the right edge of the screen with a percentage label in a dark badge.
Add a small circular reading-progress dial in the top-left corner of the screen showing the percentage read in the middle.
Add a green circular scroll dial in the bottom-right corner, 30px in from the edges, with a pale green ring and a white centre.
Add a larger indigo circular progress dial in the top-right corner, 20px from the top and right, with the percentage in bold text inside.

Pin a dot navigation to the left edge of this page so visitors can jump between the Overview, Services, Pricing and Contact sections (anchors overview, services, pricing, contact).
Move the section dots to the right-hand side of the screen and make them vertically centred, with the dots in a dark slate colour that turns orange when hovered.
Show a small label bubble next to each dot on hover: Overview, Our services, Pricing plans and Get in touch.
Style the hover labels as dark navy pills with white 14px semi-bold text, left-aligned, 6px rounded corners, 6px 12px padding and no little arrow.
Number the line-style section markers with leading zeros (01, 02, 03, 04) and show the numbers in a bold amber colour at 14 pixels.
Use the icon version of the navigation with a house, briefcase, price tag and envelope icon, and give every icon a screen-reader label like ‘Jump to Pricing’.
Show an in-page menu where each entry is an icon followed by its section name, with the icons slate grey and the active one teal.
Turn it into a horizontal bar fixed to the bottom of the screen, centred, with a white rounded background, soft padding and a thin grey border.
Make the active dot stretch into a long line on the left-hand navigation: dots 10 pixels wide by 3 pixels tall, growing to 28 pixels wide on hover.
Make the dots bigger, 18 pixels across with 16 pixels between them, and give each one a 2px white ring so they stay visible over dark photo sections.

Turn the whole page into a scroll-driven animation: as visitors scroll, play through these 12 product frames in order.
Play the 12-frame lamp sequence inside this section only, in a canvas 640 pixels wide and 360 pixels tall, centred on the page.
Show the sequence as a wide cinematic strip: 100% of the width and 70vh tall, aligned to the left of its section.
Use only the first six frames, as a short sequence in a 480 by 270 canvas aligned to the right.
Start the animation 300 pixels after the section scrolls into view, so visitors read the intro text first.
Finish the frames 150 pixels before the end of the section, so the last image holds while the visitor keeps scrolling.
Load only half of the frames up front (50%) so the page opens faster, and fetch the rest while the visitor scrolls.
Make the full-page scroll animation sit behind the page text: set the sequence’s layer order to -1 so my white headings stay readable on top of the frames.
Play the lamp sequence backwards so scrolling down makes it fade out: use frames 12 down to 1 in that order, in a 600 by 340 canvas.
Play 8 frames in a small 320 by 180 canvas.

Put a site-wide search field in the header area with a magnifier icon.
Add a search box labelled “Search our journal” with the placeholder “Try ‘backups’ or ‘typography’”.
Add a search field with no button, 420 pixels wide, so visitors press Enter to search.
Add a live search that shows up to 5 matching posts as soon as a visitor has typed 2 letters.
Add a live search that only looks through pages, not blog posts.
Add a live search that also looks inside post text and excerpts, not only titles.
Add a live search whose results use the second card layout and show only titles and descriptions, no pictures.
Add a live search that says “Nothing found, try a different word” when there are no matches.
Style the search field with generous padding, a thin grey border, fully rounded corners and dark text, with a blue border when it is focused.
Make the search button dark green with white bold 15 pixel text and rounded corners, fading to a lighter green on hover.

Add the checkout shipping form with the heading “Delivery address”.
Show the shipping section with the checkbox text “Deliver to a different address” and no heading.
Colour the shipping heading (“Shipping Address”) dark green on a soft mint background.
Make the shipping heading 26px bold uppercase in charcoal, with 18px of space under it.
Wrap the shipping heading in a 3px teal border with 12px radius and 12px by 20px padding.
Style the different-address checkbox label: indigo colour, 16px semi-bold, with 16px of space below.
Colour the shipping field labels charcoal, the required star orange, and keep 5px between label and field.
Make shipping labels 12px uppercase with letter spacing.
Set shipping inputs to 50px tall, white background, 1px grey border turning orange on focus, 6px radius.
Make shipping input text 15px dark navy with a grey placeholder, 12px of padding inside and 8px margin around each field.

Show the product’s main photo with a row of thumbnails underneath it.
Show only the main product image and hide the thumbnail gallery.
Put the thumbnails in a column on the left of the main image.
Show the thumbnails in a three-column grid with 12 pixels between them.
Label the sale badge “Hot deal” and pin it to the top right corner of the photo.
Make the sale badge a bold red tag with white text.
Crop the main photo to a fixed 420 pixel height and fill the frame.
Round the main image corners by 16 pixels and add a thin grey border.
Style the arrows on the main photo as white circles with a dark arrow that turn black on hover.
Hide the arrows on the main photo but keep the thumbnail strip arrows, coloured teal.

Show the product SKU, categories and tags under the add to cart button.
Rename the meta labels to “Item no.”, “Collection” and “Keywords”.
List only the categories and tags, and hide the SKU line.
Show only the SKU. Hide categories and tags.
Display the product details in a single inline row instead of stacked lines.
Remove the labels and show just the values.
Make labels a dark grey, values a brand blue, and turn the links orange on hover.
Show the labels in bold uppercase small type and the values slightly larger.
Add 14 pixels of space between the SKU, category and tag lines.
Show the tags and categories in italics so they read like a quiet footnote under the product details.

Show this product’s price with its sale price, a small “Price” label and an OFF badge showing the discount.
Change the label to “Today only” and the discount badge to say “SAVED”.
Show only the prices, hiding both the label and the discount badge.
On a regular-priced product, show just the price with a “From” label and no badge.
Make the original price a muted grey and the sale price a bold red so the saving is obvious.
Turn the discount badge into a green pill with white text and rounded corners.
Make the sale price large and bold at 32 pixels, with the regular price smaller at 18 pixels.
Make the discount badge an outlined red tag: a 2 pixel red border, red text, bold uppercase 12 pixel lettering and no fill.
Style the label as small uppercase text with a dark blue colour.
Add breathing room between the price and the sale price, and between the sale price and the badge.

Show the product’s star rating with the number of customer reviews next to it.
Change the rating label to say “verified buyer reviews”.
Show a product with a 4.5 average, so the last star appears half filled.
For a brand new product with no reviews yet, show five empty stars and a zero count.
Colour the filled stars a deep orange and the empty ones a light grey-blue.
Make the stars bigger, 32 pixels.
Place the stars and review count side by side in one row, pushed to the right.
Turn the review count label navy, and a lighter blue when someone hovers over it.
Style the review count as bold 15 pixel text with a bit of letter spacing.
Pin the star rating to the left edge of the product summary.

Show customer reviews for the product with a review form below them.
Rename the reviews heading to “What our customers say”.
Hide the reviews heading and show just the review list and the form.
Hide the reviewers’ profile pictures.
Make the rating stars in each review a deep amber with light grey empty stars, slightly bigger.
Colour the reviewer name navy, the date grey and the review text charcoal.
Make the reviewer names bold and the review text 16 pixels.
Put the review form in a soft grey card with padding, a thin border and rounded corners.
Turn the submit button green with white text, darkening on hover, and round its corners.
Give the form fields a light border with rounded corners, padding inside, and a blue border when focused.

Show the stock status on a product page and leave the default wording.
On the product page, replace the stock message with “Ready to ship in 24 hours” and make it a confident green.
Tell shoppers when an item is gone: show “Sold out – restocking in spring” in red whenever the product is out of stock.
For back-ordered products, display “Pre-order: ships in 3 weeks” in amber.
Use the stock block with a low-stock style message so shoppers see the remaining units, for example “Only a few left” followed by the count.
Make the stock line bold and 18 pixels tall so it stands out under the price.
Style the availability text as small uppercase with wide letter spacing, in a deep teal.
Show “Last units in stock” in italics for a limited edition print, with the remaining quantity.
For an unavailable product, show a muted grey “Currently unavailable” message with a strike-through look.
Set the stock status for all three situations at once: “In stock, dispatched today”, “Sold out” and “Backorder, 2 week wait”, each with its own colour.

Organise the product details into Description, Additional Information and Reviews tabs.
Show only the Description and Additional Information tabs and remove the Reviews tab.
Hide the Additional Information tab so shoppers only see Description and Reviews.
Show only a Description tab and nothing else.
Add 20 pixels of space between the tab headings and 24 pixels between the tab row and the panel below it.
Give the tab row a thin grey bottom border and underline the active tab in a thick orange line.
Colour the tab labels grey, turning dark on hover, and give the active tab a light blue background.
Make the tab titles bold uppercase 14 pixel text with a little padding.
Style the specifications table with navy labels on a light grey background and darker value text.
Rename the reviews heading and colour the review stars in a rich gold with a larger size.

Add our company logo, the Brightlabs wordmark image, linking to the home page and 180 pixels wide.
Use our SVG logo file, 200 pixels wide, so it stays crisp on high-density screens.
Centre the logo and make it 240 pixels wide.
Right-align a small 120 pixel logo.
Make the logo link to our About page and open it in a new tab.
Link the logo to our partner site, but tell search engines not to follow it.
Show the logo with a colour-swap effect: the navy and orange wordmark on the page, switching to the reversed colours when someone hovers over it.
Add the logo with a hover swap to the reversed-colour version, and make the swap a slow 0.8 second fade.
Use the full logo normally and shrink to the orange icon-only mark, 48 pixels wide, when the header sticks on scroll.
Add the logo with a screen-reader label of “Brightlabs home page” and organisation schema markup for search engines.

Make this page scroll smoothly with the default settings.
Add a slow, floaty smooth scroll to this page with a 4 second glide.
Add a quick, snappy smooth scroll with a 1 second animation.
Make each mouse-wheel notch scroll a shorter distance, around 250 pixels, so the page feels more controlled.
Make touch scrolling on phones feel faster by tripling the touch speed.
Use a sharper ease-out curve so the scroll starts fast and settles gently.
Use an even stronger ease-out so the scroll comes to rest very softly.
Use a gradual ease-in curve so the scroll builds up speed slowly.
Let the page scroll loop back to the top when the visitor reaches the bottom.
Make clicks on in-page anchor links glide to their target instead of jumping.

Embed my Spline 3D scene from https://prod.spline.design/EXAMPLE-SCENE-ID/scene.splinecode so visitors can orbit and zoom the model.
Show the 3D model in a 600 pixel wide, 400 pixel tall frame.
Stretch the 3D scene across the full width of its column and make it 70% of the screen height.
Display a spinning loader while the 3D scene downloads, with a pale grey ring and a bright orange moving segment.
Show the on-screen interaction hint so people know they can drag to rotate the model.
Let the 3D scene follow the mouse anywhere on the page, not just over the canvas.
Make a tall, narrow phone-shaped viewer for the 3D model, 360 pixels wide and 640 pixels tall.
Create a tall hero area for the 3D product model: 900 pixels high and full width.
Embed a square 3D logo viewer, 480 by 480, with the loader and the drag hint both turned on.
Add a compact 300 pixel tall 3D badge viewer for the footer, with a dark grey loader ring.

Add a checklist of what is included in the Pro plan: unlimited projects, priority support, custom domains and daily backups.
Add a list of our office locations where each city links to its own page: London, Berlin and Toronto.
Lay the list out horizontally as a row of feature highlights with space between the items.
Add a centred list of our opening hours with a thin grey line between each row.
Turn the service list into soft cards: each row gets a pale blue background, padding, rounded corners and a thin border.
Add a list of quick links where the icon and its background change colour when the visitor hovers over a row.
List eight programming languages we support but only show the first four, with a “Show all languages” link that reveals the rest.
Make the list icons a brand purple at 18px and the text dark grey, with more space between the rows.
Put each list icon inside a round teal badge with white icon colour.
Add a list that fades the other items when you hover one of them, with a red hover text colour and a light pink highlight.

Add a billing toggle that switches between Monthly and Yearly. Under Monthly show “Pay $12 per month, cancel any time” and under Yearly show “Pay $99 once a year and save 30%”.
Create a Personal / Business switch centred on the page. Personal says “Plans for freelancers and hobby projects”, Business says “Plans for teams that need shared workspaces”.
Make a Light / Dark theme switcher with the second switch style, and give each side a one-line description of how the interface will look.
Add an Annual / Lifetime switcher that uses the underline style with no slider button, so people click the two words to swap the content.
Switch between Residential and Commercial and align the whole toggle to the right of its container.
Style the toggle for a Standard / Express shipping switch: a white round handle, a grey #cccccc track that turns navy #1b2a49 when the second option is selected.
Colour the labels of a Cash / Card payment toggle: grey #666666 when not selected and navy #1b2a49 for the selected one.
Make a larger toggle for Weekly / Fortnightly meal boxes: a 34px switch with 28px of space between each label and the slider.
Add a Monthly / Yearly toggle with a calendar icon before each label, 18px icons with 8px of spacing, grey when inactive and orange #f26a1b when selected.
On a Starter / Pro plan switch, colour the Starter description deep blue #112233 and the Pro description teal #0a7d6e, and add a soft shadow under the slider handle.

Add a table of contents at the top of the article that lists every heading.
Retitle the contents box to In This Guide, with a short line underneath saying what is covered.
Number the contents list instead of using bullets.
List only the H2 headings so the contents stay short.
Let readers collapse the contents list with a toggle arrow next to the title.
Put a list icon in front of the contents title.
Use the style 2 contents design with a navy active link colour.
Smooth-scroll to each section over 600 milliseconds and stop 80 pixels above the heading so it clears the sticky header.
Put the contents in a bordered card with a light background, padding and rounded corners.
Make the contents title bold and large and the links smaller, with sub-headings a lighter grey.

Add tabs to a product page with three tabs: Description, Specifications and Reviews, each with a short paragraph of content.
Show a small icon in front of each tab title: a info circle, a gear and a star.
Put the tab buttons in a 220px column down the left, with the content beside them, for a course curriculum.
Put the tab buttons below the content instead of above it.
Open the Pricing tab by default instead of the first tab.
Make the tab buttons share the full width equally and align the labels to the left.
Style the tabs as rounded pills 12px apart: inactive pills light grey with dark text, the active pill purple with white text.
Add a thin orange underline under the active tab title.
Give the content panel a white background, a soft grey border, rounded corners and 24px of padding.
Show only icons in the tab bar (no text labels) for a compact tab switcher with three views: list, grid and map.

Show my blog categories (Travel Guides, Food & Drink, Photography and Wellness) as a three-column grid of image tiles, each with the category name and how many posts it holds.
List the same four categories in two wide columns using the second card style, and show each category’s description underneath its name.
Build a category showcase in the third card style, and make the category photo appear as the background when someone hovers a card.
Turn the category list into a sliding carousel with dots so visitors can swipe through Travel Guides, Food & Drink, Photography and Wellness.
Arrange the categories in a metro mosaic layout so some tiles are larger than others.
Show only the two busiest categories, sorted by post count from highest to lowest.
Include categories that do not have any posts yet, such as Podcasts, and put the word “articles” after each post count.
Hide the post counts and make the category names white on a dark navy overlay so they read clearly over the photos.
Make the category names 26px and turn them amber when hovered, with a bold weight.
Show each category description trimmed to eight words with an ellipsis, in light grey 14px text.

Show our leadership team as a grid of four people per row. Each card has a photo, name, job title and links to their website, LinkedIn, Twitter and email. Use Maya Lindqvist (Head of Design), Tomas Berg (Lead Engineer), Priya Nair (Product Manager) and Jonas Weber (Support Lead).
Build a team section with three people per row, centre-aligned, using the second card style. People: Maya Lindqvist, Tomas Berg and Priya Nair, with their job titles.
List our four-person support and product team as simple name-and-role cards in the third card style, with names as H4 headings and no profile links.
Introduce the whole team with the fourth card style, which layers a coloured shape behind each photo, three per row and centred.
Turn the five team members into a sliding carousel showing three people at a time, with dots underneath.
Show the team as a masonry grid with category filter buttons above it (All, Design, Engineering, Support) so visitors can narrow it down by department.
Make the social icons on the team cards 16px glyphs inside 36px navy #1b2a49 circles with white icons, turning orange #f26a1b when hovered.
Colour the member names navy #1b2a49, turning orange #f26a1b on hover, and the job titles slate grey #5b6678 turning dark #111111 on hover.
Put each team member in a card with a light #f5f7fb background that flips to navy #1b2a49 on hover, with a 2px orange border and a soft shadow on hover, and white text while hovered.
Crop each team photo into a circle with a 3px orange #f26a1b ring, 6px of padding inside the ring and a peach #fde8d8 background, and leave 12px of room around the name and title below.

Add a customer reviews section with three testimonials side by side in a grid, each with the customer’s photo, name, job title and a short quote.
Show the three testimonials as a sliding carousel that rotates automatically, with dots underneath.
Add a bold headline above each quote, like Best decision this year, followed by the quote and the customer details.
Use the second testimonial design with the customer photo placed beside the quote.
Use the third testimonial design for a centred, highlighted quote.
Make the customer photos 80px wide, fully round, with a soft shadow.
Put each testimonial on a white card with a light border, rounded corners, 28px of padding and a gentle shadow.
Colour the quote dark grey, the customer name navy and the job title muted blue-grey.
On hover, turn the card background light purple and the customer name purple so visitors get a little feedback.
Keep the testimonial cards a fixed 140px tall and let long quotes scroll inside, with a thin visible scroll bar.

Show the customer’s billing and delivery addresses on my thank-you page, headed “Billed to” and “Delivered to”.
Add an address summary after checkout with the headings “Invoice details” and “Where we’re sending it”.
Colour the address section headings deep navy.
Make the address headings 20px and bold.
Put 14px of breathing room between each address heading and the address underneath.
Show the address text in a soft slate grey.
Set the address lines at 16px with roomy 1.7 line spacing.
Turn the address headings into small uppercase labels with wide letter spacing.
Set the customer’s address text in italics.
Style the address block my way: “Bill to” and “Ship to” headings in forest green 18px with 10px spacing, and dark grey 15px address text.

On the thank-you page, list what the customer bought: rename the heading to “Your purchase”, the columns to “Item” and “Price”, and the totals labels to “Items total”, “Delivery”, “Paid with” and “Amount due”.
Show the order summary on the confirmation page and make its heading navy, 24px.
Give the order summary heading a pale blue background with rounded corners and padding.
Make the table header row dark navy with white bold text.
Zebra-friendly body: product rows on a light grey background in charcoal 15px text with a thin divider line under each cell.
Highlight the totals area at the bottom of the order table with a cream background, bold 16px text and generous padding.
Frame the whole table header with a 2px navy border.
Round the corners of the totals section to 10px and give it a thin green outline.
Space things out: 30px under the summary heading and 20px between the sections.
Style the purchase summary as a branded receipt: forest-green uppercase heading, green header row with white text, and white product rows with thin grey borders.

Show our company history as a vertical timeline with four milestones: 2019 Founded in Lisbon, 2021 First product launch, 2023 Team of 25 and 2025 100,000 customers, alternating left and right of a centre line.
Make a left-aligned timeline where the line runs down the left edge and every milestone sits to its right.
Build a product roadmap timeline for Q1 to Q4 with the line on the right-hand side and a different icon for each quarter.
Switch to the card style: each milestone sits in a boxed card with a little arrow pointing at the line.
Put a START label at the top of the timeline and a FINISH label at the bottom instead of the default icons.
Draw the centre line in teal and leave 40 pixels of space between the line and each milestone card.
Colour the milestone markers: white icons on deep purple circles, turning orange with white icons when hovered.
Make milestone titles navy and bold at 22 pixels, the descriptions grey at 15 pixels, and turn the title blue on hover.
Use card style with a thin divider line under each milestone title, and give the titles a light grey border colour.
Add a Read more button to each milestone linking to a page about it, and animate a 6 pixel centre line so an orange fill draws down it as visitors scroll, over a light grey track.

Embed this YouTube walkthrough at full width so visitors can watch it right on the page: https://www.youtube.com/watch?v=aqz-KE-bpKQ
Show our Vimeo showreel (video 76979871) in the brand orange #ff5a36, and hide the Vimeo title, author portrait and byline so only the film is visible.
Embed the YouTube video aqz-KE-bpKQ using privacy-enhanced mode, with modest YouTube branding, no player controls, autoplay, muted and looping. Title the frame “Product demo video” for screen readers.
Show a poster image from my media library (the workshop photo) in place of the video, with a custom round play badge on top, a bold caption “Studio tour” and the line “A walk through our workshop” beneath it. Colour the caption white on navy #1b2a49. The real video only loads when someone clicks play.
Add a click-to-open video: show the workshop photo as a thumbnail with the caption “Watch the workshop tour” and play the YouTube video aqz-KE-bpKQ in a lightbox popup when it is clicked.
Instead of a thumbnail, show only a play icon image on the right-hand side that opens the YouTube video aqz-KE-bpKQ in a popup, 80px wide, with orange #f26a1b drop-wave rings radiating from it.
Use the workshop photo as a poster for the YouTube video aqz-KE-bpKQ with a 72px circular play button that pulses slowly, and add Google video structured data so search engines can index it.
Frame the YouTube video aqz-KE-bpKQ in a 4px navy #1b2a49 border with 16px rounded corners and a soft drop shadow. On hover the border turns orange #f26a1b and the video grows slightly.
Play the self-hosted MP4 from my media library (the studio tour clip) directly on the page, muted and looping, with standard player controls.
Show the Vimeo video 76979871 as a thumbnail from my media library, captioned “Our showreel”, that opens the video in a lightbox popup when clicked.

Nexter Blocks recipes

Frequently Asked Questions

Everything you need to know about copying a recipe and letting your AI assistant build the block inside Gutenberg.

What is a recipe?

A ready-made, plain-English instruction you copy and give to your AI assistant. It tells the assistant exactly which Nexter block to build and how, so you skip writing the request from scratch.

How do I set this up?

Install Nexter Blocks, switch on the blocks you want, connect your site’s MCP connection to your AI assistant, then copy a recipe and paste it in. The Nexter Abilities page has the full steps.

Does the assistant build real blocks or just HTML?

Real Nexter Gutenberg blocks. They show up in the block editor with their settings panels, and you can edit, duplicate or move them like any block you add by hand.

Which AI assistants are supported?

Any assistant that supports the Model Context Protocol, such as Claude or Cursor. The recipes work the same in all of them.

A recipe says the block is not registered. What now?

Switch the block on under Nexter › Blocks and run the recipe again. Blocks that are switched off cannot be created by your assistant.

Do I need Nexter Blocks Pro?

37 of the 105 blocks in this library are free. The rest, including the WooCommerce set, need Pro. Each block page shows which one it is.

Can I change a recipe before I use it?

Yes. Treat each one as a tested starting point and add your own text, colours, counts or spacing before you paste it.

Will the result be responsive?

The assistant places the same tested blocks you would add by hand, so the output keeps their responsive behaviour and uses your site’s global colours and typography.

What's New ?

September 2026 Update: Move Your SEO Data From Yoast Or Rank Math, Multi-Step Forms, And Blocks In Widget Areas

August 2026 Update: WordPress 7.1 Ships, Nexter’s Biggest Security Hardening Pass, and a Customizer Redesign

27 New WooCommerce Blocks And Nexter SEO Are Live: Build A Store And Handle SEO Inside WordPress

May 2026 Update: 84 New WP Abilities, WordPress 7.0, and WCEU Kraków with Sagar

🗞️April 2026 Update: Global Border, Performance Pass, and Block Abilities Coming

🗞️March 2026 Updates: NexterWP Got Faster and 27 WooCommerce Blocks Are Almost Here

Nexter Blocks Recipe Library

Frequently Asked Questions

Take your WordPress Experience to
the Next Level

Nexter Theme

Nexter Extension

Nexter Blocks

Nexter For

Resources

Get Support

Our Products

Company

Legal

Nexter Blocks Recipe Library

Frequently Asked Questions

Get Exclusive WordPress Tips, Tricks and Resources Delivered Straight to Your Inbox!

Nexter Theme

Nexter Extension

Nexter Blocks

Nexter For

Resources

Get Support

Our Products

Company

Legal

Get Exclusive WordPress Tips, Tricks and Resources
Delivered Straight to Your Inbox!