Ready HTML snippets

This document does not repeat the editor’s standard blocks. It only collects ready-made snippets for the “Raw HTML” block: when you need custom formatting and the built-in blocks are not enough.

[ WARNING! ] The texts on this page are examples. Replace them with your own, or delete or mark the document as draft when the starter layout is no longer needed. The content will remain in the editor but stay hidden from visitors.

Each example below has two windows in a row:

  1. The first html block shows how the snippet looks on the page.
  2. The second regular code block contains the same code for copying.

All snippets below are prepared to look reasonable in both light and dark themes.

Useful snippets

Primary call-to-action strip

Why: a short call to action with a clear button at the end of a page or section.

Need a consultation for your case?

Briefly describe the task and leave a contact. We will reply during business hours and suggest the next step without unnecessary back-and-forth.

Contact us
<section style="margin:1.5rem 0;padding:28px 24px;border:1px solid rgba(127, 127, 127, 0.24);background:rgba(127, 127, 127, 0.10);text-align:center;">
  <strong style="display:block;font-size:1.25rem;margin-bottom:10px;">Need a consultation for your case?</strong>
  <p style="margin:0 auto 18px;max-width:40rem;opacity:.9;">Briefly describe the task and leave a contact. We will reply during business hours and suggest the next step without unnecessary back-and-forth.</p>
  <a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:12px 22px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Contact us</a>
</section>

Two-action strip

Why: when you want to give people a choice: write to you, review pricing, or open contacts.

Ready to discuss the task?

You can message us right away or first look at how the process works.

<section style="margin:1.5rem 0;padding:26px 24px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);text-align:center;">
  <strong style="display:block;font-size:1.2rem;margin-bottom:8px;">Ready to discuss the task?</strong>
  <p style="margin:0 auto 18px;max-width:38rem;opacity:.9;">You can message us right away or first look at how the process works.</p>
  <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
    <a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:12px 22px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Get in touch</a>
    <a href="/pages/faq" style="display:inline-block;padding:12px 22px;border:1px solid color-mix(in srgb, var(--main-color, #000) 45%, transparent);text-decoration:none;font-weight:600;color:inherit;">How it works</a>
  </div>
</section>

Helpful tip and warning

Why: quickly highlight a good practice and a common mistake.

Tip. On the first screen, it is best to say one clear thing: who you are, how you help, and what to do next.

Warning. Do not leave template copy, test phone numbers, or internal links on a published site.

<p style="margin:1rem 0;padding:14px 16px;border-left:4px solid #15803d;background:rgba(34, 197, 94, 0.14);"><strong>Tip.</strong> On the first screen, it is best to say one clear thing: who you are, how you help, and what to do next.</p>
<p style="margin:1rem 0;padding:14px 16px;border-left:4px solid #b91c1c;background:rgba(239, 68, 68, 0.14);"><strong>Warning.</strong> Do not leave template copy, test phone numbers, or internal links on a published site.</p>

Process steps

Why: show the client journey or work stages in 3-4 steps.

  1. 1 Send a request or write to us in the way that suits you best.
  2. 2 We clarify details, timing, and format.
  3. 3 We come back with a clear answer and the next step.
<ol style="margin:1rem 0;padding:0;list-style:none;">
  <li style="margin-bottom:14px;padding-left:2.6rem;position:relative;">
    <span style="position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--main-color, #111);color:var(--main-on-color, #fff);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;">1</span>
    Send a request or write to us in the way that suits you best.
  </li>
  <li style="margin-bottom:14px;padding-left:2.6rem;position:relative;">
    <span style="position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--main-color, #111);color:var(--main-on-color, #fff);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;">2</span>
    We clarify details, timing, and format.
  </li>
  <li style="padding-left:2.6rem;position:relative;">
    <span style="position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--main-color, #111);color:var(--main-on-color, #fff);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;">3</span>
    We come back with a clear answer and the next step.
  </li>
</ol>

Three-column benefits

Why: show the three main supports of a service or product.

Timing Clear stages, visible status, and no disappearing in the middle.
Transparency We discuss the task first and only then agree on the work.
Support We stay in touch after the main stage as well.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:1.25rem 0;">
  <div style="padding:16px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
    <strong style="display:block;margin-bottom:6px;">Timing</strong>
    <span style="opacity:.88;">Clear stages, visible status, and no disappearing in the middle.</span>
  </div>
  <div style="padding:16px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
    <strong style="display:block;margin-bottom:6px;">Transparency</strong>
    <span style="opacity:.88;">We discuss the task first and only then agree on the work.</span>
  </div>
  <div style="padding:16px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
    <strong style="display:block;margin-bottom:6px;">Support</strong>
    <span style="opacity:.88;">We stay in touch after the main stage as well.</span>
  </div>
</div>

Contacts in two columns

Why: place a compact contact block on a page without building a full contact section.

How to reach us

Phone: +7 (999) 000-00-00

Email: hello@example.com

When we reply

Mon-Fri: 10:00-18:00

Urgent messages are best duplicated in a messenger.

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.25rem 0;">
  <div style="padding:18px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
    <strong style="display:block;margin-bottom:8px;">How to reach us</strong>
    <p style="margin:0 0 8px;">Phone: <a href="tel:+79990000000">+7 (999) 000-00-00</a></p>
    <p style="margin:0;">Email: <a href="mailto:hello@example.com">hello@example.com</a></p>
  </div>
  <div style="padding:18px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.09);">
    <strong style="display:block;margin-bottom:8px;">When we reply</strong>
    <p style="margin:0 0 8px;">Mon-Fri: 10:00-18:00</p>
    <p style="margin:0;">Urgent messages are best duplicated in a messenger.</p>
  </div>
</div>

Numbers block

Why: show experience, project volume, number of clients, or other facts without heavy design.

10+ years of experience
250+ projects
3 days to start work
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.25rem 0;">
  <div style="padding:18px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);text-align:center;">
    <strong style="display:block;font-size:1.8rem;line-height:1;margin-bottom:6px;">10+</strong>
    <span style="opacity:.85;">years of experience</span>
  </div>
  <div style="padding:18px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);text-align:center;">
    <strong style="display:block;font-size:1.8rem;line-height:1;margin-bottom:6px;">250+</strong>
    <span style="opacity:.85;">projects</span>
  </div>
  <div style="padding:18px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);text-align:center;">
    <strong style="display:block;font-size:1.8rem;line-height:1;margin-bottom:6px;">3 days</strong>
    <span style="opacity:.85;">to start work</span>
  </div>
</div>

Pricing cards

Why: show 2-3 work formats not as a table, but as separate cards.

Basic

One-time consultation and a list of next steps.

from 10,000 RUB Ask for details
Optimal

Analysis, work plan, and support throughout the task.

by agreement Send request
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.25rem 0;">
  <div style="padding:20px;border:1px solid rgba(160, 160, 160, 0.38);">
    <strong style="display:block;margin-bottom:8px;font-size:1.1rem;">Basic</strong>
    <p style="margin:0 0 10px;opacity:.88;">One-time consultation and a list of next steps.</p>
    <strong style="display:block;margin-bottom:14px;">from 10,000 RUB</strong>
    <a href="/pages/contact" style="color:inherit;font-weight:600;">Ask for details</a>
  </div>
  <div style="padding:20px;border:1px solid rgba(127, 127, 127, 0.28);background:rgba(127, 127, 127, 0.11);">
    <strong style="display:block;margin-bottom:8px;font-size:1.1rem;">Optimal</strong>
    <p style="margin:0 0 10px;opacity:.88;">Analysis, work plan, and support throughout the task.</p>
    <strong style="display:block;margin-bottom:14px;">by agreement</strong>
    <a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:10px 18px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Send request</a>
  </div>
</div>

Good fit / poor fit

Why: quickly filter out mismatched leads and explain when the service makes sense.

Good fit
  • if you need a clear site structure
  • if you have a real service and contacts
  • if you want a careful launch without overload
Poor fit
  • if there is still no clear offer
  • if the site is needed “just to have one”
  • if you are not ready to replace template copy
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.25rem 0;">
  <div style="padding:18px;border:1px solid rgba(34, 197, 94, 0.38);background:rgba(34, 197, 94, 0.13);">
    <strong style="display:block;margin-bottom:10px;">Good fit</strong>
    <ul style="margin:0;padding-left:1.2rem;">
      <li>if you need a clear site structure</li>
      <li>if you have a real service and contacts</li>
      <li>if you want a careful launch without overload</li>
    </ul>
  </div>
  <div style="padding:18px;border:1px solid rgba(239, 68, 68, 0.38);background:rgba(239, 68, 68, 0.13);">
    <strong style="display:block;margin-bottom:10px;">Poor fit</strong>
    <ul style="margin:0;padding-left:1.2rem;">
      <li>if there is still no clear offer</li>
      <li>if the site is needed “just to have one”</li>
      <li>if you are not ready to replace template copy</li>
    </ul>
  </div>
</div>

Short case

Why: show a small story with a task and a result without turning it into a long article.

Case: we updated a service website structure

Task: remove overload from the homepage and create a clearer route for new visitors.

What we did: shortened the first screen, rebuilt the menu, and added explicit calls to action.

Result: the site became easier to read, and incoming messages turned into more specific requests.

<div style="margin:1.25rem 0;padding:20px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.08);">
  <strong style="display:block;margin-bottom:8px;font-size:1.1rem;">Case: we updated a service website structure</strong>
  <p style="margin:0 0 10px;"><strong>Task:</strong> remove overload from the homepage and create a clearer route for new visitors.</p>
  <p style="margin:0 0 10px;"><strong>What we did:</strong> shortened the first screen, rebuilt the menu, and added explicit calls to action.</p>
  <p style="margin:0;"><strong>Result:</strong> the site became easier to read, and incoming messages turned into more specific requests.</p>
</div>

What is included in the service

Why: remove uncertainty and show the scope of work without a long paragraph.

Scope of work

1. We review the task and clarify the input.

2. We agree on scope, format, and timing.

3. We complete the main part of the work.

4. We deliver the result and collect feedback.

<div style="margin:1.25rem 0;padding:18px 20px;border:1px solid color-mix(in srgb, var(--main-color, #111) 14%, transparent);">
  <strong style="display:block;margin-bottom:10px;">Scope of work</strong>
  <p style="margin:0 0 8px;"><strong>1.</strong> We review the task and clarify the input.</p>
  <p style="margin:0 0 8px;"><strong>2.</strong> We agree on scope, format, and timing.</p>
  <p style="margin:0 0 8px;"><strong>3.</strong> We complete the main part of the work.</p>
  <p style="margin:0;"><strong>4.</strong> We deliver the result and collect feedback.</p>
</div>

Best for these tasks

Why: quickly show the situations where the format makes the most sense.

This format is usually chosen when you need to:
  • launch a page quickly
  • refresh an old site
  • simplify the service structure
  • build a clearer first screen
  • add trust elements
  • prepare a page for ads
<div style="margin:1.25rem 0;padding:18px 20px;border:1px solid rgba(127, 127, 127, 0.22);background:rgba(127, 127, 127, 0.07);">
  <strong style="display:block;margin-bottom:10px;">This format is usually chosen when you need to:</strong>
  <ul style="margin:0;padding-left:1.2rem;columns:2;column-gap:2rem;">
    <li>launch a page quickly</li>
    <li>refresh an old site</li>
    <li>simplify the service structure</li>
    <li>build a clearer first screen</li>
    <li>add trust elements</li>
    <li>prepare a page for ads</li>
  </ul>
</div>

What affects pricing

Why: answer the “why does it cost that much?” question before the conversation starts.

Pricing usually depends on: the amount of work, urgency, number of pages or blocks, how prepared the materials are, and the amount of non-standard tasks.
<div style="margin:1.25rem 0;padding:18px 20px;border-left:3px solid var(--main-color, #111);background:rgba(127, 127, 127, 0.07);">
  <strong style="display:block;margin-bottom:8px;">Pricing usually depends on:</strong>
  <span style="opacity:.9;">the amount of work, urgency, number of pages or blocks, how prepared the materials are, and the amount of non-standard tasks.</span>
</div>

Testimonials stack

Why: show several short testimonials without using a dedicated quote block.

“It became much clearer where to lead visitors and how to collect requests.”
Anna, business services

“After the page was rebuilt, clients started writing with much more specific questions.”
Igor, private practice

“Now there is a proper structure instead of a random set of blocks.”
Maria, service company

<div style="margin:1.25rem 0;border-left:3px solid var(--main-color, #111);padding-left:16px;">
  <p style="margin:0 0 14px;">“It became much clearer where to lead visitors and how to collect requests.”<br><strong>Anna, business services</strong></p>
  <p style="margin:0 0 14px;">“After the page was rebuilt, clients started writing with much more specific questions.”<br><strong>Igor, private practice</strong></p>
  <p style="margin:0;">“Now there is a proper structure instead of a random set of blocks.”<br><strong>Maria, service company</strong></p>
</div>

Final block before request

Why: bring a short summary and the final next step together in one place.

If the task is already clear, you can move to the next step right now

Write what needs to be done, in what format, and by what time. If there is still little information, we can start with a short review.

Send request
<section style="margin:1.5rem 0;padding:24px;border:1px solid rgba(127, 127, 127, 0.24);background:rgba(127, 127, 127, 0.09);">
  <strong style="display:block;font-size:1.15rem;margin-bottom:8px;">If the task is already clear, you can move to the next step right now</strong>
  <p style="margin:0 0 16px;max-width:42rem;opacity:.9;">Write what needs to be done, in what format, and by what time. If there is still little information, we can start with a short review.</p>
  <a href="/pages/contact" class="theme-btn-primary" style="display:inline-block;padding:12px 22px;text-decoration:none;font-weight:600;background-color:var(--main-color, #000);color:var(--main-on-color, #fff);">Send request</a>
</section>

What next

You can search for and adapt snippets like these with queries such as html cta, feature grid html, contact card html, pricing cards html, stats section html, or pricing table html. The point of this catalog is not to collect everything possible, but to provide a solid starter set that is easy to reshape for your own site.