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

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

<p>Overview of landing page template at 901 screen width or larger.</p>

<nomarkdown>
<img src="{{site.baseurl}}/static/img/landing_top_example_2x.png" alt="landing examples" height="100%" width="100%">
</nomarkdown>

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

<div class="content-67 content-first">
<p>Landing pages provide an overview of a section and help users situate themselves within the site and the subject matter. Users should be able to quickly skim section topics and select the category that interests them.</p>

#### When to use
* The landing page template should be used for the top level page under each main navigation section on the site to help users navigate to the various sub-sections within the navigation vertical.  
* This template may also be used for campaign pages.

#### When to use something else
* When a new page is needed within a navigation section, rather than at the top level.
* When page  content includes paragraph copy or more detailed deifnitions or explanations.
</div>

<div class="content-33 content-last">
##### Page components included

#### Area 1

[Hero]()

[Text introduction]()

#### Area 2

[50/50 image & text]()

[25/75 image & text]()

[Half width link blob]()

[Gray well]()

#### Area 3

[Related posts / Related links]()

[Emain signup]()
</div>

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

<p>At breakpoints 900 and below, the sidebar stacks below the main content area as shown. </p>

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

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

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

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

<h2 id="style">Style</h2>

#### Top of the page (1a or 1b)
* Template requires one of two options for the top of the page: either a hero (1a) or using a text introduction (1b). With a [text introduction](), the sidebar takes the full length of the page. 

#### Main content area (2)
* This area must contain at least one page component, but we have no default preference as to which one(s). 
* Recommended hierarchy of components from top of the page down, is [image & text]() components, [gray well](), and [half width link blobs](). 
* [Gray well]() component should not be used as the top item within this area of the page, if the top of the page contains a hero.

#### Sidebar (3)
* This area must contain at least one page component, but we have no default preference as to which one(s). 
* If using both static and dynamic content, preference for dynamic content to appear first.



<h2 id="content-guidelines">Content Guidelines</h2>

* Headings should be as succinct as possible, ideally ______ characters  or less.
* Description beneath heading should also be succint, roughly ______ characters.
* Call to action link should  ______ characters or less.
* Full width body copy is not an option in this template as content should be focused on skimming and navigating.




<commit_msg>adjusted spacing in behaviors<commit_after>---
layout: page
title: Landing page
category: UI toolkit
published: true
---

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

<p>Overview of landing page template at 901 screen width or larger.</p>

<nomarkdown>
<img src="{{site.baseurl}}/static/img/landing_top_example_2x.png" alt="landing examples" height="100%" width="100%">
</nomarkdown>

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

<div class="content-67 content-first">
<p>Landing pages provide an overview of a section and help users situate themselves within the site and the subject matter. Users should be able to quickly skim section topics and select the category that interests them.</p>

#### When to use
* The landing page template should be used for the top level page under each main navigation section on the site to help users navigate to the various sub-sections within the navigation vertical.  
* This template may also be used for campaign pages.

#### When to use something else
* When a new page is needed within a navigation section, rather than at the top level.
* When page  content includes paragraph copy or more detailed deifnitions or explanations.
</div>

<div class="content-33 content-last">
##### Page components included

#### Area 1

[Hero]()

[Text introduction]()

#### Area 2

[50/50 image & text]()

[25/75 image & text]()

[Half width link blob]()

[Gray well]()

#### Area 3

[Related posts / Related links]()

[Emain signup]()
</div>

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

<p>At breakpoints 900 and below, the sidebar stacks below the main content area as shown. </p>

<div class="content-67 content-first">
#### Breakpoints 901+
![landing_behavior_desktop_2x.png]({{site.baseurl}}/static/img/landing_behavior_desktop_2x.png)
</div>

<div class="content-33 content-last">
#### Breakpoints 900 and less
![landing_behavior_mobile_2x.png]({{site.baseurl}}/static/img/landing_behavior_mobile_2x.png)
</div>

<h2 id="style">Style</h2>

#### Top of the page (1a or 1b)
* Template requires one of two options for the top of the page: either a hero (1a) or using a text introduction (1b). With a [text introduction](), the sidebar takes the full length of the page. 

#### Main content area (2)
* This area must contain at least one page component, but we have no default preference as to which one(s). 
* Recommended hierarchy of components from top of the page down, is [image & text]() components, [gray well](), and [half width link blobs](). 
* [Gray well]() component should not be used as the top item within this area of the page, if the top of the page contains a hero.

#### Sidebar (3)
* This area must contain at least one page component, but we have no default preference as to which one(s). 
* If using both static and dynamic content, preference for dynamic content to appear first.



<h2 id="content-guidelines">Content Guidelines</h2>

* Headings should be as succinct as possible, ideally ______ characters  or less.
* Description beneath heading should also be succint, roughly ______ characters.
* Call to action link should  ______ characters or less.
* Full width body copy is not an option in this template as content should be focused on skimming and navigating.
{'fraction_non_alphanumeric': 0.10955961331901182, 'fraction_numerical': 0.017185821697099892, 'mean_word_length': 4.633535004321521, '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': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2198498', 'n_tokens_mistral': 1987, 'n_tokens_neox': 1845, 'n_words': 849}