Article Detail
Loading playground
Overview
ArticleDetail renders a long-form reading experience built from three parts: an optional hero media, the title, and a rich-content body. The body accepts either a raw HTML string or an HtmlFragment, and renders through the RichContent component for safe inline HTML. An optional trailing SocialShare row is toggled with showSocialShare (default false).
Use the same reading view for blog articles, glossary entries, and other long-form content by choosing which optional elements to provide. For example, a glossary entry can omit both media and the social-share row. ArticleDetail replaces the former BlogPostDetail component — see the UI changelog.
Pair article content with BlogPostListing, which renders a blog index.
Key Business & UX Benefits
- A focused article layout (media, title, body, share) keeps readers in the story without sidebar noise pulling attention away.
- The rich-content body accepts the HTML editors already produce in their CMS, so writers ship richer stories without ad-hoc templates.
- One shared reading view supports articles, glossary entries, and other long-form content without component forks.
- The optional
SocialSharerow amplifies reach on the channels that drive referral traffic back to the storefront, and stays off where sharing isn't wanted (such as glossary entries).
ArticleDetail view with BlogPostListing (the index) so the blog has a consistent structure end-to-end.Usage
Feature List
- Renders three parts: optional hero media, title, and a rich-content body, with an optional trailing SocialShare row
- showSocialShare (default false) toggles the SocialShare row independently of the article content
- Body accepts a raw HTML string or HtmlFragment and renders through RichContent for safe inline HTML
- Reusable for blog articles, glossary entries, and other long-form content
API Reference
| Prop | Default | Type |
|---|---|---|
title | string | |
body | string | HtmlFragment | |
media | ||
showSocialShare | false | boolean |
showTableOfContents | false | boolean |
Changelog
BlogPostDetail was renamed to ArticleDetail and promoted to the shared reading view behind both the Blog Post and Glossary sections. There is no backwards-compatible alias.
Show migration
Update imports and template tags.
- import BlogPostDetail from '#ui/components/BlogPostDetail/BlogPostDetail.vue';
+ import ArticleDetail from '#ui/components/ArticleDetail/ArticleDetail.vue';
- <LBlogPostDetail :title :media :body />
+ <LArticleDetail :title :media :body />
New optional showSocialShare prop (default false) toggles the trailing SocialShare row. SectionBlogPostDetail enables it; SectionGlossaryDetail leaves it off.