Display Template Test

Display Template Test

INTERNAL TEST PAGE — DO NOT PUBLISH

This page demonstrates problems with the default Simplicity Laser blog stylesheet.

The expected visual order is: H1 should be largest, H2 should be second largest, and H3 should be third largest.

Types of Laser Hair Removal: Which Will Work for You?

Expected: This should be the largest heading on the page. It should normally appear only once.

 


H2 — Major Article Section

Expected: This should be clearly smaller than the H1 but clearly larger than the H3 below.

Current problem: On the inspected article, the H2 is only approximately 15px. That makes it smaller than the H3.

H3 — Subsection Inside the H2 Section

Expected: This should be smaller and less visually prominent than the H2 above it.

Current problem: On the inspected article, the H3 is approximately 19.2px with 4.8px of letter spacing. It therefore looks more important than the H2.

THE MAIN PROBLEM

The H2 is currently smaller than the H3. This reverses the visual hierarchy and makes the article harder to scan.


H2 — Heading Hierarchy Comparison

The following headings appear immediately beside one another to make the size problem easy to see:

THIS IS AN H2: It Should Be More Prominent

THIS IS AN H3: It Should Be Less Prominent

Pass condition: The H2 above is noticeably larger and more prominent than the H3.

Fail condition: The H3 appears larger, bolder, wider, or more prominent than the H2.


H2 — Capitalization and Letter-Spacing Test

This Is a Normal Title-Case H3 Heading

Expected: The heading should display in title case exactly as entered above.

Fail condition: The stylesheet forces the heading into uppercase or adds so much space between letters that it becomes difficult to read.

A Longer H3 Heading That Tests Whether Excessive Letter Spacing Makes the Text Difficult to Read

Expected: This heading should wrap naturally across lines without looking stretched out.

A Longer H2 Heading That Tests Wrapping Across Multiple Lines on Desktop and Mobile Devices

Expected: This H2 should remain readable, clearly larger than an H3, and should not create horizontal scrolling.


H2 — Paragraph Spacing Test

This is the first paragraph in the section. Body text should have a comfortable font size, line height, and maximum reading width.

This is the second paragraph. There should be a visible but reasonable amount of space between paragraphs.

H3 — Paragraph Following a Subheading

This paragraph should sit close enough to the H3 to show that the two elements belong together. It should not collide with the heading or sit unusually far away from it.


H2 — Standard Bullet List

Expected: Every item should have a visible bullet, proper indentation, and consistent vertical spacing.

  • This is the first bullet point.
  • This is the second bullet point.
  • This is a longer bullet point that tests whether the second line aligns correctly underneath the text rather than underneath the bullet.
  • This is the final bullet point.

H3 — Nested Bullet List

  • Parent bullet
    • Nested bullet one
    • Nested bullet two
  • Second parent bullet

Fail conditions: Missing bullets, insufficient indentation, overlapping text, or excessive gaps between list items.


H2 — Numbered List

Expected: Each step should have a visible number and proper indentation.

  1. Complete the first step.
  2. Complete the second step.
  3. Complete a longer third step that wraps onto another line and confirms that the wrapped text remains correctly aligned.
  4. Complete the final step.

H3 — Nested Numbered List

  1. Main step one
    1. Substep one
    2. Substep two
  2. Main step two

Fail conditions: Missing numbers, numbers positioned outside the content area, or wrapped text aligning underneath the number.


H2 — Link Formatting Test

This paragraph contains a standard internal text link.

Expected: The link should be visually distinguishable from regular text without relying solely on a very subtle color change.


H2 — Blockquote Test

This is a sample quotation. It should be visually separated from the main article text without becoming excessively large or difficult to read.

Expected: The quotation should have clear spacing, readable typography, and a recognizable visual treatment.


H2 — FAQ Formatting Test

Expected: “Frequently Asked Questions” is a major article section and should therefore be an H2. Each individual question is a subsection and should be an H3.

H3 — How should I prepare for my appointment?

Follow the preparation instructions provided by your Simplicity Laser location. Contact the clinic if any instructions are unclear.

H3 — How many appointments will I need?

The appropriate number of appointments varies by person, treatment area, hair characteristics, and individual treatment plan.

H3 — Can I ask questions before treatment begins?

Yes. Your provider can discuss preparation, treatment, aftercare, and other concerns before beginning.

H3 — Where can I find the nearest location?

Visit the Simplicity Laser locations page to find a nearby clinic.


H2 — Expandable FAQ Test

This section checks whether the theme supports native expandable FAQ elements.

FAQ: What happens during an appointment?

Your provider will explain the procedure, prepare the treatment area, and complete the treatment according to your individual plan.

FAQ: What should I do after treatment?

Follow the aftercare instructions supplied by your clinic and contact the clinic if you have questions.

FAQ: How do I schedule another appointment?

Contact your preferred location or use the booking options available on the Simplicity Laser website.


H2 — Table Formatting Test

Expected: The table should remain usable on mobile without forcing the entire page to scroll horizontally.

Element Expected Appearance Current Concern
H1 Largest heading Excessive uppercase and letter spacing
H2 Second-largest heading Currently smaller than H3
H3 Third-largest heading Excessive letter spacing and prominence
Lists Visible markers and indentation Verify desktop and mobile rendering
FAQs H2 section with H3 questions Verify spacing and hierarchy

H2 — Developer Acceptance Checklist

  • The H1 is the largest heading.
  • Every H2 is visibly larger than every H3.
  • Headings are not automatically forced into uppercase.
  • Letter spacing does not make headings look stretched apart.
  • Long headings wrap naturally on mobile.
  • No heading creates horizontal page scrolling.
  • Paragraph spacing remains consistent.
  • Bullets and numbers are visible and properly indented.
  • FAQ questions are less prominent than the FAQ section heading.
  • Tables remain usable on mobile.

THIS TEST PASSES WHEN:

A person can immediately identify the H1, H2, and H3 hierarchy without needing to read the labels. The order must be H1 largest, H2 second largest, and H3 third largest.