Ready HTML snippets
© MyReady
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.
Each example below has two windows in a row:
- The first
htmlblock shows how the snippet looks on the page. - 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.
<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/contacts/" 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(--header-footer-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.
<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/contacts/" 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(--header-footer-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.
<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.
<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(--header-footer-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(--header-footer-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(--header-footer-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.
<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.
<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.
<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.
<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/contacts/" 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/contacts/" 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(--header-footer-color, #fff);">Send request</a>
</div>
</div>Good fit / poor fit
Why: quickly filter out mismatched leads and explain when the service makes sense.
<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.
<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.
<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.
<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.
<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.
<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.
<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/contacts/" 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(--header-footer-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.