<commit_before>---
layout: page
title: Featured content module
category: UI toolkit
---

- [Use cases](#use)
- [Desktop style](#desktop)
- [Tablet style](#tablet)
- [Mobile style](#mobile)
{: class="toc"}

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

Featured content modules (FCMs) function to highlight a specific piece of content within a page. They are not integral to the page, and could be removed while leaving the page integrity intact. 
{: class="lead-in"}

</div>

<div class="content-50 content-last">
  <h5 class="repo-list-header">Repository</h5>
  <ul class="repo-list">
    <li>
      <span class="cf-icon cf-icon-github"></span>
    </li>
    <li>
      <a href="https://github.com/cfpb/cf-typography"><h4>cf-something</h4></a>
      <p>FCMs in the Capital Framework</p>
    </li>
  </ul>
</div> 


<h2 id="use">Use<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>


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

Featured content modules should include a single piece of content from a defined content type, including: Blog, News, Video, Event, and Tool. 

FCMs appear below the title and introductory paragraph on a page, and retain that position on all screen sizes.

FCMs contain a headline, body copy text and a graphical element related to the piece of content being featured. They are a “mini story” and never simply a dominant visual. 

FCMs can appear on any page type, though they are best suited for pages 3rd level and below in the site map. They are designed to accommodate pages with either a left hand navigation or right hand sidebar.

</div>

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

<h2 id="desktop">Style at desktop size<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>

<div class="content-33 content-first">
On a page with a sidebar, the featured content module spans 8 columns.
</div>

<div class="content-67 content-last">
![Image of featured content module example at desktop size]({{ site.baseurl }}/static/img/featured-content-module/fcm-desktop-right.png)
</div>

<div class="content-33 content-first">
On a page with left-hand navigation, the featured content module spans 9 columns.
</div>

<div class="content-67 content-last">
![Image of featured content module example at desktop size]({{ site.baseurl }}/static/img/featured-content-module/fcm-desktop-left.png)
</div>

<div class="content-50 content-first">
* Module is 270px total in height with 30px top and bottom margins. It appears 60px underneath the header/intro paragraph of the page
* Background color of module is Gray 5 with a 1px Gray 50 stroke.
* Module bleeds to the edge of the page, right sidebar and left nav.
* Visual spans 5 columns and bleeds into right sidebar.
* Text spans 3 columns and is left and top aligned. When on a page with a right-hand sidebar, the text area has 60px of left margin and 30px of right margin. When on a page with left-hand navigation, the text area has 30px of left and right margin.
</div>

<div class="content-50 content-last">
* Tag is an 18pt black minicon and H4 text, appears 30px from top
* Headline is H2, appears 30px below tag and is 1–2 lines
* Body copy is 16pt, appears 30px underneath headline, is 2 to 4 lines
* A CTA may be used and appears 30px underneath body copy. If a link, standard link styles apply. If a button, standard primary button styles apply.
</div>


<h2 id="tablet">Style at tablet size<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>

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

Differences in style at tablet size

* Text spans 5 columns
* Visual spans 7 columns
* Visual's height is fixed, and cropping will occur on both the left and right sides


</div>

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

![Image of featured content module example at tablet size]({{ site.baseurl }}/static/img/featured-content-module/fcm-tablet01.png)

![Image of featured content module example at tablet size]({{ site.baseurl }}/static/img/featured-content-module/fcm-tablet02.png)

</div>


<h2 id="mobile">Style at mobile size<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>

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

Differences in style at mobile size

* Module appears 30px underneath the header/intro paragraph of the page
* Header becomes H2
* Body becomes 16pt
* Tag becomes H5, minicon drops off
* Visual drops below text
* 30px space between text and top of visual


</div>

<div class="content-33">

![Image of featured content module example at mobile size]({{ site.baseurl }}/static/img/featured-content-module/fcm-mobile01.png)

</div>

<div class="content-33">

![Image of featured content module example at mobile size]({{ site.baseurl }}/static/img/featured-content-module/fcm-mobile02.png)

</div>



<commit_msg>modified featured content module description and changed pt to px<commit_after>---
layout: page
title: Featured content module
category: UI toolkit
---

- [Use cases](#use)
- [Desktop style](#desktop)
- [Tablet style](#tablet)
- [Mobile style](#mobile)
{: class="toc"}

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

Featured content modules (FCMs) function to highlight a specific piece of content within a page. They are not integral to the page, and could be removed while leaving the page integrity intact. 
{: class="lead-in"}

</div>

<div class="content-50 content-last">
  <h5 class="repo-list-header">Repository</h5>
  <ul class="repo-list">
    <li>
      <span class="cf-icon cf-icon-github"></span>
    </li>
    <li>
      <a href="https://github.com/cfpb/cf-typography"><h4>cf-something</h4></a>
      <p>FCMs in the Capital Framework</p>
    </li>
  </ul>
</div> 


<h2 id="use">Use<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>


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

Featured content modules should include a single piece of content from a defined content type, including: Blog, News, Video, Event, and Tool. 

FCMs appear below the title and introductory paragraph on a page, and retain that position on all screen sizes.

FCMs contain a headline, body copy text and a graphical element related to the piece of content being featured. They are a “mini story” and never simply a dominant visual. 

FCMs can appear on any page type, though they are best suited for pages 3rd level and below in the site map. They are designed to accommodate pages with either a left hand navigation or right hand sidebar.

</div>

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

<h2 id="desktop">Style at desktop size<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>

<div class="content-33 content-first">
* Module is 270px total in height with 30px top and bottom margins. It appears 60px underneath the header/intro paragraph of the page
* Background color of module is Gray 5 with a 1px Gray 50 stroke.
* Module bleeds to the edge of the page, right sidebar and left nav.
* Visual spans 5 columns and bleeds into right sidebar.
* Text spans 3 columns and is left and top aligned. When on a page with a right-hand sidebar, the text area has 60px of left margin and 30px of right margin. When on a page with left-hand navigation, the text area has 30px of left and right margin.
</div>

<div class="content-67 content-last">
![Image of featured content module example at desktop size]({{ site.baseurl }}/static/img/featured-content-module/fcm-desktop-right.png)
</div>

<div class="content-33 content-first">
* Tag is an 18px black minicon and H4 text, appears 30px from top
* Headline is H2, appears 30px below tag and is 1–2 lines
* Body copy is 16px, appears 30px underneath headline, is 2 to 4 lines
* A CTA may be used and appears 30px underneath body copy. If a link, standard link styles apply. If a button, standard primary button styles apply.
</div>

<div class="content-67 content-last">
![Image of featured content module example at desktop size]({{ site.baseurl }}/static/img/featured-content-module/fcm-desktop-left.png)
</div>


<h2 id="tablet">Style at tablet size<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>

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

Differences in style at tablet size

* Text spans 5 columns
* Visual spans 7 columns
* Visual's height is fixed, and cropping will occur on both the left and right sides


</div>

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

![Image of featured content module example at tablet size]({{ site.baseurl }}/static/img/featured-content-module/fcm-tablet01.png)

![Image of featured content module example at tablet size]({{ site.baseurl }}/static/img/featured-content-module/fcm-tablet02.png)

</div>


<h2 id="mobile">Style at mobile size<span class="cf-code-link"><a href="">View code <span class="cf-icon cf-icon-external-link"></span></a></span></h2>

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

Differences in style at mobile size

* Module appears 30px underneath the header/intro paragraph of the page
* Header becomes H2
* Body becomes 16px
* Tag becomes H5, minicon drops off
* Visual drops below text
* 30px space between text and top of visual


</div>

<div class="content-33">

![Image of featured content module example at mobile size]({{ site.baseurl }}/static/img/featured-content-module/fcm-mobile01.png)

</div>

<div class="content-33">

![Image of featured content module example at mobile size]({{ site.baseurl }}/static/img/featured-content-module/fcm-mobile02.png)

</div>




{'fraction_non_alphanumeric': 0.12061494015683037, 'fraction_numerical': 0.02001650846058605, 'mean_word_length': 4.3641394576646375, 'pattern_counts': {'":': 0, '<': 155, '<?xml version=': 0, '>': 155, 'https://': 2, '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': '7043264', 'n_tokens_mistral': 3073, 'n_tokens_neox': 2847, 'n_words': 1189}