Article content type showcase: every block we render | EVDEV — Shopify Ecommerce Agency Toronto | EVDEV Toronto
Internal QA showcase
Every article block:tested in one placefor QA & content authors
/
Content type showcase
Quick summary — Article content type showcase: every block we render
Documentation
QA
Content System
Published:
Reading time:
8 min read
Views:
612
Likes:
47
Summary
Internal QA article — demonstrates every Portable Text block the EVDEV blog renderer supports: headings, paragraphs, lists, both pull-quote variants, inline images, the inline CTA banner, and rich-text marks. Lives on the production dataset so authors and developers can verify the render before shipping new posts.
Location:
Toronto, Canada
Table of contents
Headings & paragraphs
Every chapter starts with an H2. The H2 text is auto-slugified into the in-page anchor that the table of contents on the left links to, and the sticky TOC active state updates as you scroll past each heading.
Sub-sections use H3
H3 is one step down from H2 and is reserved for sub-sections inside a chapter. The renderer keeps the heading hierarchy clean for screen readers and for Google's outline view.
Lists & rich-text marks
We support four inline marks. Strong text emphasizes the key point, italic text adds nuance, accent text highlights an EVDEV term in green, and links — like Shopify Plus — open in a new tab when external.
Bullet list item one — short, punchy, single line.
Bullet list item two with a longer line that wraps onto a second row to show how the bullet stays aligned with the first line of text.
Bullet list item three — used for unordered findings, audit results, or quick checklists.
Numbered step one — ordered lists are used for procedures.
Numbered step two — the marker uses the brand accent green.
Numbered step three — keeps clean alignment with multi-line items.
Pull quotes & inline image
Pull quotes come in two variants. The boxed variant draws a full green border and is used to break up dense sections. The rule variant uses a thin left-only border for short asides.
Boxed pull quote — bordered on all four sides, with a small green pill bullet on the left of the text. Use this for the marquee quote of an article.
— EVDEV editorial
Rule pull quote — only the left edge is highlighted in green. Lighter weight, perfect for a short observation between paragraphs.
QA showcase — translucent glass cube refracting green and cyan light against a soft studio background, used here as the inline image example for the EVDEV blog Portable Text renderer.
Inline images render as a figure with the alt text doubling as a small caption. The dimensions and width are pulled from the Sanity asset metadata so next/image preserves the aspect ratio without layout shift.
Inline CTA banner
The inline CTA banner is the strongest in-flow conversion block we ship in articles. Title, supporting line with a green pill bullet, a price label (often "Free"), and a deep-link CTA — all bordered in accent green.
