Detail Layout
Detail page layout.
Contents
Requirements
Page template will be used for detail pages.
Page will be laid out in three columns, with the left column reserved exclusively for the Social Share component. The center column will be the
main-content(body), while the right column will be reserved for optionalsidebar-content(right-rail) component, per designs. If there is no right rail content (read this next or ad), content is centered.
Template will allow other components below themain-content.The page template will have the Standard Hero component.
Template will allow the Social Share component.
The page will have the Rich Text Panel component, which includes a list of code snippet options. This component may be added again in the experience editor.
Page template will allow the Related Items component.
Page will allow the Tags component.
Page will allow the Topics component.
The page will allow all components, unless noted otherwise.
CMS Fields
Field Label | Field Type | Required? | Notes | |
|---|---|---|---|---|
| 1 | Title | multi-line text | yes | defaults to page title; admins may edit |
| 2 | Content Type | dropdown | yes | article, press release, etc. |
| 3 | Page Featured Image | image | no |
|
| 4 | Body | rich text | yes | full suite of rich text capabilities (bold, numbered lists, images, italics, etc.) and code snippets |
| 5 | Tags/Topics |
| no | Ability to add topics and tags to the page. |
Example
<div class="page-container detail-page">
<header class="site-header">
<!-- header contents -->
</header>
<header class="mobile-header">
<!-- header contents -->
</header>
<main id="maincontent">
<div class="grid-container">
<!-- main contents -->
<!-- sub-nav contents -->
<!-- standard-hero contents -->
<section class="detail-layout">
<div class="detail-content">
<div class="content-wrapper">
<div class="hero-content">
<!-- hero contents -->
</div>
<article class="main-content">
<section class="rich-text wysiwyg-content">
<div class="rich-text-inner">
<!-- rich-text contents -->
</div>
</section>
<!-- tags contents -->
<!-- author-block contents -->
<!-- disqus contents -->
<!-- social-share contents -->
</article>
</div>
<div class="sidebar-content">
<!-- ad-space-300 contents -->
<!-- related-items contents -->
</div>
</div>
</section>
<!-- promo-full-width contents -->
</div>
</main>
<footer class="site-footer">
<!-- footer contents -->
</footer>
</div>Referenced
https://styleguide.asce.org/section-layout.html#asgref-layout-detail-layout