<commit_before>---
layout: page
title: Document detail
category: UI toolkit
published: true
---


- [Use case](#use)
- [Behavior](#behavior)
- [Content guidelines](#content-guidelines)
- [Style](#style)
 {: class="toc"}

<p>Document detail page types provide summary information about a document or related group of documents. These pages help users better understand the relevancy and context of documents before deciding whether or not to download or engage further.</p>

<p>Each document detail page template has three basic content areas:</p>

<div class="content-50 content-first">
![docdetail_top_example.png]({{site.baseurl}}/static/img/docdetail_top_example.png)
</div>

<h2 id="use">Use case</h2>

<div class="content-67 content-first">

#### When to use
* When the primary goal of the page is to encourage users to download a resource or understand the context around a document. 
* When creating a filterable list of items, document detail pages house the items within the filterable list.
 

#### When other options are better
* When providing the full text of an article or detailed content, but not specifically focused on a document for download, use the more general [Learn page template]().
</div>

<div class="content-33 content-last">
##### Page components included
<p>Within each area of the template, various components may be selected to best fit the content of the specific page being created.</p>

#### Area 1
[Item introduction]()


#### Area 2

[Full width text field]()
[Table]()
[Expandable]()

#### Area 3

[Metadata / Related posts / Related links]()
[Contact information]()
[Email sign up]()
</div>

<h2 id="behavior">Behavior</h2>

<p>Below the 901 px breakpoint, the sidebar stacks below the main content area.</p>

<div class="content-67 content-first">

#### Breakpoints 901+
![docdetail_behavior_desktop.png]({{site.baseurl}}/static/img/docdetail_behavior_desktop.png)
</div>

<div class="content-33 content-last">

#### Breakpoints 900 and less
![docdetail_behavior_mobile.png]({{site.baseurl}}/static/img/docdetail_behavior_mobile.png)
</div>

### Post Preview

<p>When document detail pages are accessed via entries within a filterable list, information about each page is displayed on [filterable list pages]() via the post preview component.</p>

<div class="content-67 content-first"><commit_msg>changed behavior to 50-50<commit_after>---
layout: page
title: Document detail
category: UI toolkit
published: true
---


- [Use case](#use)
- [Behavior](#behavior)
- [Content guidelines](#content-guidelines)
- [Style](#style)
 {: class="toc"}

<p>Document detail page types provide summary information about a document or related group of documents. These pages help users better understand the relevancy and context of documents before deciding whether or not to download or engage further.</p>

<p>Each document detail page template has three basic content areas:</p>

<div class="content-50 content-first">
![docdetail_top_example.png]({{site.baseurl}}/static/img/docdetail_top_example.png)
</div>

<h2 id="use">Use case</h2>

<div class="content-67 content-first">

#### When to use
* When the primary goal of the page is to encourage users to download a resource or understand the context around a document. 
* When creating a filterable list of items, document detail pages house the items within the filterable list.
 

#### When other options are better
* When providing the full text of an article or detailed content, but not specifically focused on a document for download, use the more general [Learn page template]().
</div>

<div class="content-33 content-last">
##### Page components included
<p>Within each area of the template, various components may be selected to best fit the content of the specific page being created.</p>

#### Area 1
[Item introduction]()


#### Area 2

[Full width text field]()
[Table]()
[Expandable]()

#### Area 3

[Metadata / Related posts / Related links]()
[Contact information]()
[Email sign up]()
</div>

<h2 id="behavior">Behavior</h2>

<p>Below the 901 px breakpoint, the sidebar stacks below the main content area.</p>

<div class="content-50 content-first">

#### Breakpoints 901+
![docdetail_behavior_desktop.png]({{site.baseurl}}/static/img/docdetail_behavior_desktop.png)
</div>

<div class="content-50 content-last">

#### Breakpoints 900 and less
![docdetail_behavior_mobile.png]({{site.baseurl}}/static/img/docdetail_behavior_mobile.png)
</div>

### Post Preview

<p>When document detail pages are accessed via entries within a filterable list, information about each page is displayed on [filterable list pages]() via the post preview component.</p>

<div class="content-67 content-first">
{'fraction_non_alphanumeric': 0.11966723549488055, 'fraction_numerical': 0.012798634812286689, 'mean_word_length': 5.1616294349540075, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4126257', 'n_tokens_mistral': 1378, 'n_tokens_neox': 1282, 'n_words': 536}