The article detail page. A flexible editorial template for reading a specific press release or news article. Reading-width text column is distinct from media width. Restrained persistent access to conversion.
CMS-DrivenFlexible Editorial Template
Page type
Editorial / Press Content
Audience intent
Read a specific article
Conversion role
Discovery — restrained persistent access
Page Pacing
01 Quiet
02 Immersive
03 Editorial
04 Editorial
05 Quiet
06 Conversion
Quiet article header opens, immersive hero media, then a long editorial reading sequence with inline media and pull quotes. Related content follows. Ends with a restrained conversion path.
Desktop WireframeDesktop-first · 12-column grid · Reading-width text column
Virtual TourCall SalesInquire☰
Category Eyebrow·Date Placeholder
Article Headline Placeholder
Article lead paragraph placeholder. One to two sentences summarizing the article. Editorial tone.
Component: Section HeaderCategory eyebrow, date, headline, lead. Centered. Reading-width. Editorial header — not a sales hero.
Article Hero Media — WideFull-width media · Distinct from reading-width text column
Component: Media FeatureWide hero media. Media width is distinct from the reading-width text column below. Flexible editorial template.
Section Heading Placeholder
Paragraph placeholder. Reading-width text column. This is the editorial body of the article. The width is deliberately narrower than the hero media above to maintain comfortable reading.
Second paragraph placeholder. The reading width is maintained throughout the body. Media can break out wider than the text column.
Section Heading Placeholder
Paragraph placeholder. Reading-width text column. This is the editorial body of the article. The width is deliberately narrower than the hero media above to maintain comfortable reading.
Second paragraph placeholder. The reading width is maintained throughout the body. Media can break out wider than the text column.
Section Heading Placeholder
Paragraph placeholder. Reading-width text column. This is the editorial body of the article. The width is deliberately narrower than the hero media above to maintain comfortable reading.
Second paragraph placeholder. The reading width is maintained throughout the body. Media can break out wider than the text column.
Section Heading Placeholder
Paragraph placeholder. Reading-width text column. This is the editorial body of the article. The width is deliberately narrower than the hero media above to maintain comfortable reading.
Second paragraph placeholder. The reading width is maintained throughout the body. Media can break out wider than the text column.
Inline MediaBreaks out wider than reading-width text
Paragraph placeholder. Continued editorial body. Reading-width maintained.
Paragraph placeholder. Continued editorial body. Reading-width maintained.
Legal Disclaimer Area — Structural requirements only. Do not invent legal content.
Floating Mobile Conversion BarWireframe representation
Call Sales
Inquire
Fixed near bottom viewport edge · env(safe-area-inset-bottom) · Visible on load · Hides on scroll down · Reveals on scroll up · 44px touch targets · Reduced motion: simplified state change · Hides when visitor reaches Contact/Inquiry page
Reusable Component Mapping
01
Article HeaderSection Header
Reusable
02
Hero MediaMedia Feature
Reusable
03
Article BodyArticle Body
Reusable
04
Related ContentRelated Content
Reusable
05
Conversion PathCTA Section
Reusable
06
FooterGlobal Footer
Reusable
Flexible editorial template. Reading-width text column is distinct from media width. Article Body is the new component — a structured editorial reading column. Build once, reuse, expand.
