Methodwise Blog Template & Style Guide

Use this guide when writing new blog posts to keep formatting, structure, and CTAs consistent.

File Location

All blog posts go in: src/content/blog/ Filename format: what-is-[topic].md (or descriptive kebab-case slug)

Frontmatter (YAML)

Every post starts with this block between --- fences:

---
title: "What Are Number Bonds? A Parent's Guide to Making and Breaking Numbers"
seoTitle: "What Are Number Bonds? A Parent's Guide | Methodwise"
description: "Number bonds show how one number breaks into two parts. Learn what they are, why teachers use them by grade, and how to help your child at home."
date: "2026-03-20"
category: "Math"
youtubeId: "18SC5_QmMmU"
image: "/blog/number-bonds-blog-image.png"
faqs:
  - question: "Are number bonds the same as fact families?"
    answer: "They're closely related but not identical..."
  - question: "Another question?"
    answer: "Another answer..."
---

Required fields

Optional fields

Category badge colors (automatic)

• Math — brand blue badge
• ELA — green badge (#c8e6c0)
• Homework Help — yellow badge (#fdf5d6)

Blog Structure (Section Order)

Follow this order for method-explainer blogs. Not every blog needs every section, but keep the order consistent.

[Opening paragraph — no heading]

---

## What Is [Method]?

---

## Why Do Teachers Use [Method]?

---

## What Grade Is [Method] Taught?

### Grade Range — Description
### Grade Range — Description
### Grade Range — Description

[Closing sentence about grade appropriateness]

---

## How [Method] Works

### Sub-topic 1
### Sub-topic 2

---

## How [Method] Connects to What You Already Know

---

## Watch: [Method] Explained

How to Help at Home

Tip title (no numbering)

Tip title (no numbering)

Let Methodwise walk through it

Common Mistakes to Watch For

Mistake title (no numbering)

Mistake title (no numbering)

Try Methodwise Free

[CTA paragraph with signup link]

Related Articles

[Links to other blogs]

Have questions about [topic]? Email me at hello@methodwise.co

---

## Heading Rules

### H1 — Page title (automatic from frontmatter)
- 36px (`text-4xl`), bold, dark gray
- You do NOT write an H1 in the markdown body — it comes from the `title` field

### H2 — Major sections
- 26px, bold, brand blue
- Use `## Section Title` for every major section
- Always put `---` (horizontal rule) BETWEEN H2 sections as a visual divider
- Do NOT put `---` inside a section (e.g., between practice questions and answers)

### H3 — Sub-headings within sections
- 20px, bold, slate color
- Use `### Sub-heading` for ALL sub-headings, including:
  - Grade-level breakdowns (e.g., `### Grades 2–3 — Foundations`)
  - How to Help tips (e.g., `### Start with objects, not worksheets`)
  - Common Mistakes (e.g., `### Confusing the whole and the parts`)
  - How it Works sub-topics
- **Never use `**bold text**` as a substitute for H3 headings**
- **Never number H3 headings** (no `### 1. Title` — just `### Title`)

### Bold text
- Use `**bold**` only for inline emphasis within paragraphs (e.g., key terms, step labels like `**Step 1:**`)
- Do NOT use bold as a heading replacement

---

## Section Dividers (`---`)

- Put `---` between every H2 section
- Do NOT put `---` between H3 sub-sections within the same H2
- Do NOT put `---` between practice questions and `**Answers:**`
- Do NOT put `---` inside the practice section at all

**Correct:**
```markdown
---

## How to Help at Home

### Start with objects
Content...

### Practice the bonds for 10
Content...

---

## Common Mistakes to Watch For

### Confusing the whole and the parts
Content...

Wrong:

## How to Help at Home

---

### 1. Start with objects
Content...

---

### 2. Practice the bonds for 10
Content...

Special Markers

These markers are processed by BlogContent.tsx and rendered as custom components.

YouTube embed

- Renders as a responsive 16:9 YouTube player
- Place inside a `## Watch:` section

### Inline CTA

- Renders as a centered card with "Ready to try it with your child?" heading and green button
- Place after the Practice section, before `

`

FAQ accordion

- Renders the FAQ accordion using the `faqs` array from frontmatter
- Place after the `

` marker

• Also generates FAQ schema markup (structured data) for Google

Cross-Links

Cross-links to other blog posts render as styled boxes (light blue background, brand blue left border).

Syntax — must follow this exact pattern:

**Rules:**
- Start with `→ ` (arrow + space)
- Wrap the entire text in `*italics*`
- Use an `<a>` tag (not markdown link syntax) with `style="color:#0061b9"`
- Must be on its own line (paragraph), not inside another element
- Do NOT use `>` blockquote syntax — it won't trigger the cross-link box

**Example:**

---

## Practice Questions

Try these with your child. Answers are below.

**Number bonds within 10 (Kindergarten–1st grade):**

1. Draw all the number bonds for 6.
2. Fill in the missing part: 10 = 4 + ___

**Make a ten (1st–2nd grade):**

3. Use a number bond to solve 9 + 4.
4. Use a number bond to solve 7 + 6.

SVG Images & Captions

SVG diagrams automatically get an italic caption below them using the alt text.

![Number bond showing 8 = 5 + 3](/blog/number-bond-8-5-3.svg)

• Caption is left-aligned, italic, smaller gray text
• The alt text IS the caption — write it as a readable description
• Only .svg files get auto-captions (PNG/JPG do not)

UTM Links

All links to Methodwise pages (chat, signup, other blogs) must include UTM parameters.

Format

https://methodwise.co/PAGE?utm_source=website&utm_medium=blog&utm_campaign=TOPIC&utm_content=PLACEMENT&utm_term=DESCRIPTION

Parameters

Common link patterns

Inline link to chat (in "How to Help" section):

[Methodwise](https://methodwise.co/chat?utm_source=website&utm_medium=blog&utm_campaign=TOPIC&utm_content=blog_inline&utm_term=TOPIC_blog_to_chat)

Bottom CTA signup link:

**[Try Methodwise Free →](https://methodwise.co/signup?utm_source=website&utm_medium=blog&utm_campaign=TOPIC&utm_content=blog_cta&utm_term=TOPIC_blog_to_sign_up)**

Mid-article CTA marker:

**Cross-link to another blog:**

https://methodwise.co/blog/SLUG?utm_source=website&utm_medium=blog&utm_campaign=THIS_TOPIC&utm_content=blog_inline&utm_term=THIS_TOPIC_to_TARGET_TOPIC

**Related Articles links:**

https://methodwise.co/blog/SLUG?utm_source=website&utm_medium=blog&utm_campaign=THIS_TOPIC&utm_content=blog_banner&utm_term=THIS_TOPIC_to_TARGET_TOPIC

---

## Bottom CTA Section (after FAQs)

Every blog ends with this structure:

```markdown
## Try Methodwise Free

When your child brings home [topic] homework and you're not sure how to explain it the way their teacher would, Methodwise walks you through it — step by step, using the same method their teacher is using.

**[Try Methodwise Free →](https://methodwise.co/signup?utm_source=website&utm_medium=blog&utm_campaign=TOPIC&utm_content=blog_cta&utm_term=TOPIC_blog_to_sign_up)**

- Start with 3 free questions — no account needed
- Free plan: 15 questions/month after signup
- Plus plan: unlimited questions + saved chat history + 7-day free trial
- Step-by-step explanations the way teachers teach

Related Articles Section

Link to all other published blogs. Use full UTM links.

## Related Articles

- [Blog Title](https://methodwise.co/blog/SLUG?utm_source=website&utm_medium=blog&utm_campaign=THIS_TOPIC&utm_content=blog_banner&utm_term=THIS_TOPIC_to_TARGET)

- [Blog Title](https://methodwise.co/blog/SLUG?utm_source=...)

Closing Line

Every blog ends with:

**Have questions about [topic]?** Email me at [hello@methodwise.co](mailto:hello@methodwise.co)

Quick Checklist

Before publishing, verify:

• Frontmatter has all required fields (title, seoTitle, description, date, category, image)
• faqs array included with 3-6 questions
• Opening paragraph before first --- (no heading)
• --- between every H2 section
• No --- inside sections (between H3s or inside practice)
• All sub-headings use ### H3 (not bold, not numbered)
• Grade-level headings use ### Grade — Description format
• YouTube embed uses `

` marker

• Mid-article CTA uses `

` marker with UTM params

• `

` marker placed after the CTA

• Practice section heading is exactly `