Skip to content

Latest commit

 

History

History
842 lines (759 loc) · 42.3 KB

components.md

File metadata and controls

842 lines (759 loc) · 42.3 KB
title permalink layout circuit-banner connecting-banner card-list demo-cards banner-subheader banner-subheader-inverse contact_us featured_items get_involved header-and-subheader class text footer content-primary sidebar main-content role-descriptions explanation-alt explanation photo callout impact testimonials progress-bar card-explanation two-col-markdown
Components
/components/
component
background-color image sidebar-color
primary
icons/circuity-pattern.svg
base-darkest
background-color image alt
dark
case-studies/prados-01.webp
Mockup of the PRADOS (Puerto Rican Address Database Operations Support) tool on an iPad
cards
title href date details img alt
Default Card
/
January 1, 2018
Card Details. This can be somewhat long. This is a default card.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
title href date details img alt
Default Card
/
January 1, 2018
Card Details. This can be somewhat long. This is a default card.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
title href date details img alt
Default Card
/
January 1, 2018
Card Details. This can be somewhat long. This is a default card.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
title href date details img alt
Default Card
/
January 1, 2018
Card Details. This can be somewhat long. This is a default card.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
title href date details img alt
Default Card
/
January 1, 2018
Card Details. This can be somewhat long. This is a default card.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
title href date details img alt
Default Card
/
January 1, 2018
Card Details. This can be somewhat long. This is a default card.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
title details img alt
Short Card
No blue section behind content.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
title date details img alt
Small Header
February 7, 2019
This is normal card with a small header. Pass in 'small-header-card' to the utils to create this card.
photos/home/news/news-01.webp
People seated at tables taking notes during a TOP presentation
top bottom
background
white
background line subheader
base-darkest
-light
How it Works
top bottom
background line subheader
base-darkest
-light
Active Sprints
background
white
title subtitle people
Contact Us
p
For questions about our programs or inquiries about partnerships, please reach out to:
name job_title contact
Mara Abrams
Founder and Co⁠-⁠Director
name job_title contact
Drew Zachary
Co-Director
site.contacts.email
name team description img alt text_align button-link
City Builder
Citi Ventures
Bringing transparency to the Opportunity Zone ecosystem for private investors, fund managers, wealth managers, and municipalities
photos/home/products/city-builder.webp
Screenshot of the City Builder website showing the occupancy rate of a selected region
right
city-builder/
name team description img alt text_align button-link
SILLE
Data Ovela
Helping leaders prepare for crisis by identifying whether local infrastructure is at risk of catastrophic failure
photos/home/products/sille.webp
Screenshot of the SILLE tool showing a satellite map of Poland with interactive features
left
sille/
name team description img alt text_align button-link
PRADOS
iCASAPR
Helping municipalities and communities in Puerto Rico collect and use address data to improve emergency response
photos/home/products/prados.webp
Mockup of the PRADOS (Puerto Rican Address Database Operations Support) tool on an iPad
right
prados/
title-image title-image-alt title subtitle buttons text
photos/get-involved.webp
Man speaking into microphone at a user engagement workshop hosted by The Opportunity Project
Get Involved
p
Join a community of hundreds working to transform America’s data into America’s innovation.
p
Tell us what you’re interested in. We’ll keep you posted about opportunities to join a sprint, attend an event, and more.
b style link
View Sprints
primary dark
sprints/
b style link
Get Updates
secondary white
site.contacts.mailing-list
number number_display title subtitle link description
1
false
Build with open data
TOP Product Development Toolkit
../product-development/toolkit
Not able to join a TOP sprint? Use our product development toolkit—based on the TOP sprint model—to create civic impact with open data. We cover user research, navigating federal data, and more.
number number_display title subtitle description
2
false
Run a TOPx sprint
Coming Soon
Are you a federal agency looking to adopt The Opportunity Project model? Use our TOPx toolkit—a step-by-step resource complete with sample materials—to help run your own TOP sprint.
title description
Sprints
p
Sprints are
a text link
12-week product development cycles
p
where we bring together tech teams and collaborators to build digital products using open data.
sprints
Get Involved
“Participating in The Opportunity Project sprint was an invaluable experience for the City Builder team. The connections we made during the sprint gave us a wealth of insight into user needs, and our conversations with data stewards at the Census Bureau guided us toward data sets that helped us develop City Builder into a powerful platform for exploring place-based investments.” - Citi Ventures Team
title description subsections button
How America’s Data Becomes America’s Innovation
We facilitate 12-week product development cycles (called “sprints”) that pull together innovators from every sector. Tech teams join a sprint to build data-powered solutions to critical problems facing the public. Then, we match them with subject-matter experts, who offer valuable information and feedback.
title description image image-alt
Collaboration, Simplified
We facilitate virtual collaboration across government, industry, and communities. In our sprints, cross-sector expertise is only an email, chat room, or call away.
photos/about/about-01.webp
Three people analyzing sticky notes on the wall at a workshop
title description image image-alt
Federal Data, Explained
The Opportunity Project unlocks the potential of open data. We help teams find, understand, and integrate government data into products that provide value and help solve important problems.
photos/about/about-02.webp
A man writing on a poster at a workshop
link text
Learn More
title text button
PRODUCT
City Builder
title text
TECH TEAM
Citi Ventures
title text
Problem statement
Catalyzing Investment in Opportunity Zones
title text
Prize Winner
Category - Building Thriving Communities (2019 TOP Prize Challenge)
title text
AGENCY
White House Council of Economic Advisors (CEA)
U.S. Department of Housing and Urban Development (HUD)
title text
HOW TOP HELPED
Through the TOP user engagement workshop, the Citi Ventures team had the opportunity to talk to investors and fund matchers, user advocates and community members, which inspired them to focus on how their end product might address multi-stakeholder needs.
title list
DATASETS USED
American Community Survey 5-Year Data - U.S. Census Bureau
Economic Research Service (ERS) - U.S. Department of Agriculture
Database of Accredited Postsecondary Institutions and Programs (DAPIP) - U.S. Department of Education
Electronic Data Gathering, Analysis and Retrieval (EDGAR) - U.S. Securities and Exchange Commission
Redfin’s Walk Score
Reonomy
title subsections
Disaster Preparedness Using Geospatial Data
text
SILLE helps leaders prepare for crisis by identifying whether local infrastructure is at risk of catastrophic failure.
title text
Younger and minority populations are less likely to have an emergency plan.
Personal and family preparedness can greatly impact the ability that individuals and communities have to successfully and rapidly recover from a disaster. However, in the 2016 National Household Preparedness Survey, only 45% of respondents reported having a household emergency plan. Additionally, people who consider preparedness part of everyday life tend to be 65 years of age or older, white and male, while people who intend to prepare but have yet to get started tend to be 45 years of age or younger, black or Hispanic, and have children.
image image-alt
case-studies/sille-02.png
A satellite in space
title text
The Opportunity Project brought together tech teams, policy and data experts, and community groups to build products using geospatial data to help all people prepare for disasters.
Over 50 participants joined the 2018 Geospatial sprint in different roles. Each role contributed a different set of knowledge and skills that can help create better-informed digital products like Sille. Built by Ovela and informed by multiple product and data experts, Sille uses satellite data and Census block data so stakeholders can understand when a vulnerable structure, like a bridge or a building, has shifted and therefore might be more susceptible to failure or collapse in a disaster. This allows for first responders to prepare and target specific areas where they can target their emergency response to during or after a natural disaster.
title text
Today, Ovela’s connections from TOP have turned into a lasting partnership.
Datel Ovela has continued its partnership with FEMA and is testing the use of this product in New York City for earthquake response and in Miami for flooding.
title image image-alt description accordions
Tech teams
process/exploding-data-motif.webp
decorative abstract, pixilated image with bright red, blue, white, turquoise and magenta
Tech teams are the companies, universities, non-profits, and students who build digital products in the sprints. They design, develop, and launch the products they build, and typically own and maintain the products after the sprints. The role of tech team includes:
aria title steps
1
Role Description
description
Design and build a digital product that uses federal open data
description
Collaborate with other sprint participants including government data experts to explore and use available data sets, user advocates to understand user needs, and product advisors to develop a post-sprint product strategy
description
Conduct user research to ensure products are solving for real user needs
description
Join virtual “milestone” calls during the sprint to share progress, ask questions and provide feedback to other teams
description
Attend in-person Demo Day to present final products
description
Own and maintain the product after the sprint, or develop a strategy for handoff
description
Optional: attend an in-person user engagement workshop at the beginning of the sprint, and apply for a financial prize at the end of the sprint
aria title steps
2
Benefits of Participating
title description
Advance your mission
Work on a problem statement that aligns with your mission or CSR interests
Leverage sprint timeline and project management to advance internal lab or development projects
title description
Develop business channels
Develop sample use cases and prototypes that demonstrate internal tech capabilities
Leverage sprint timeline and project management to advance internal lab or development projects
title description
Gain access to cross-sector experts
Access to federal data and policy experts for real time Q&A
Access to end users for testing and feedback
title description
Build relationships & partnerships
Build relationships in government
Develop partnerships with user groups and other companies
title description
Media spotlight and public relations
Gain visibility and press from Demo Day and beyond
title description
Provide a creative opportunity
Designers, developers, and engineers from your organization have the opportunity to drive the design and build of the product
text
title year default image image-alt description links
2020 Census Sprint
2019
ps-active
photos/sprints/2020-census.webp
People crossing a sidewalk
Create digital tools and resources to help get out the count during the 2020 Census. Challenges include: Bridging the digital divide, Increasing digital literacy, Promoting 2020 Census jobs, and Reaching hard-to-count communities.
link-path link-text
2020_Census_Problem_Statements.pdf
View Full Brief (PDF)
title year default image image-alt description links
Catalyzing Investment in Opportunity Zones
2019
ps-active
photos/sprints/2019-workforce-zones.webp
Children playing outside
Teams from companies, universities, and more sign up to build digital products that use federal open data to help solve these challenges.
link-path link-text
2019_workforce_problem_statements.pdf
View Full Brief (PDF)
title year default image image-alt description links
Modernizing Talent Discovery for High Growth Entrepreneurship
2019
ps-active
photos/sprints/2019-workforce-talent.webp
Women indoors looking at something out of frame
Create digital tools or open sourced data to transform talent discovery, matching, and retention in mid-size cities across the country, to help them achieve innovation and regional economic growth.
link-path link-text
2019_workforce_problem_statements.pdf
View Full Brief (PDF)
title year default image image-alt description links
Resources to Unleash American Entrepreneurship
2019
ps-active
photos/sprints/2019-workforce-eship.webp
Women writing on a whiteboard
Develop tools to empower entrepreneurs and innovation ecosystem builders to find and navigate the variety of resources available across the federal government.
link-path link-text
2019_workforce_problem_statements.pdf
View Full Brief (PDF)
title year default image image-alt description links
Helping the American Workforce Leverage Multiple Pathways for Career Growth
2019
ps-active
photos/sprints/2019-workforce-pathways.webp
Two men in suits smiling and looking at a laptop together
Create digital tools that help American workers to consider and take advantage of the multiple pathways available to find or advance in careers, from making alternative pathways more attractive to making opportunities more discoverable
link-path link-text
2019_workforce_problem_statements.pdf
View Full Brief (PDF)
title year default image image-alt description links
Promoting Access to and Interest in STEM Fields
2018
ps-inactive
photos/sprints/2018-stem.webp
Anatomical drawings of the main human body systems
Develop tools for parents and students that promote students’ interest in STEM and empower them to pursue STEM education locally.
link-path link-text
2018-stem.pdf
View Full Brief (PDF)
title year default image image-alt description links
Helping States Develop Education Report Cards
2018
ps-inactive
photos/sprints/2018-reportcard.webp
Closeup screenshot of application with average daily viewer statistics displayed
Develop parent-friendly, scalable approaches to communicating data about public schools that drive insight and engagement—and meet the requirements of a recent federal law.
link-path link-text
2018-reportcard.pdf
View Full Brief (PDF)
title year default image image-alt description links
Using AI to Connect Veterans with Registered Apprenticeships
2018
ps-inactive
photos/sprints/2018-ai.webp
A line of soldiers facing away from the camera and saluting
Develop tools that use artificial intelligence algorithms or natural language processing technology to match veterans to registered apprenticeship programs.
link-path link-text
2018-ai.pdf
View Full Brief (PDF)
title year default image image-alt description links
Increasing Government Accountability by Connecting Federal Spending and Performance Data
2018
ps-inactive
photos/sprints/2018-accountability.webp
Closeup of an individual getting their blood pressure taken, showing only the arms of the nurse and patient
Develop public facing tools that link federal spending and performance (or outcome) data to provide comprehensive insight into the use of federal taxpayer dollars across programs.
link-path link-text
2018-accountability.pdf
View Full Brief (PDF)
title year default image image-alt description links
Improving Access to and Management of Federal Grants
2018
ps-inactive
photos/sprints/2018-grants.webp
Black and white photo of the U.S. Treasury building
Develop tools that expand on existing systems to help grant recipients manage the entire grants lifecycle, helping grant managers and recipients search for opportunities, streamline reporting, and assess risks.
link-path link-text
2018-grants.pdf
View Full Brief (PDF)
title year default image image-alt description links
Using Geospatial Data to Help People Prepare for Disasters
2018
ps-inactive
photos/sprints/2018-disasters.webp
Birdseye view of a hurricane over coastline
Create digital tools that use data to help individuals and community leaders gain a better understanding of national and community hazards and threats and enable the public to take appropriate preparedness actions.
link-path link-text
2018-disasters.pdf
View Full Brief (PDF)
title year default image image-alt description links
Harnessing Data and Leveraging Digital Tools to Combat the Opioid Crisis
2018
ps-inactive
photos/sprints/2018-opioids.webp
Man standing in an arched hallway holding a baby in front of him, facing away from the camera
Create digital tools and data sharing capabilities to support decisions across stakeholders responding to the opioid crisis, such as public health, public safety, law enforcement, community groups, the private sector, and individuals.
link-path link-text
2018-opioids.pdf
View Full Brief (PDF)
title year default image image-alt description links
Helping Tribal, State, and Local Governments with Local Address Data Collection
2018
ps-inactive
photos/sprints/2018-address.webp
overhead view of suburban residential block
Develop resources that help tribal, state, and local governments to create and maintain open address point data.
link-path link-text
2018-address.pdf
View Full Brief (PDF)
title year default image image-alt description links
Identifying and Strengthening Civic Environmental Stewardship
2018
ps-inactive
photos/sprints/2018-environ.webp
Hands planting a seedling
Develop tools that visualize and provide access to the patterns, overlaps, and gaps in environmental stewardship efforts in order to identify groups that support community quality of life and strengthen community resilience.
link-path link-text
2018-environ.pdf
View Full Brief (PDF)
title text
Our Process
row
border cards
border-0
number title description
1
Identify challenges
Federal agencies and advocacy organizations identify our nation’s most pressing social, economic, and environmental challenges.
number title description
2
Team up
Teams from companies, universities, and more sign up to build digital products that use federal open data to help solve these challenges.
border cards
border-base-light border-top
number title description
3
Build
Over 12 weeks, teams build their solutions. Experts provide feedback on user needs, product strategy, and the best datasets available to solve each problem.
number title description button
4
Launch & scale
Teams launch their products at our annual Demo Day showcase. Afterward, we continue to help teams deploy their solutions to their target end users.
link text
our-process
Learn More
image img-alt overlay
photos/sprints/2020-earth-sprint-banner.webp
overhead view of beach with sand, large rocks, and bright blue water
title subtitle text button-text button-link button-color
2020 Earth Sprints
LAUNCHED JUNE 2020
This year, teams are leveraging technology and open data to solve challenges related to the natural and built environment, such as disaster response, sustainable energy and communities, the blue economy, and more.
Get Updates
site.contacts.mailing-list
primary-red
text subtext body
The Opportunity Project
OUR MISSION
p
Finding federal data is hard. Making an impact with it is even harder.
p
That’s where we come in.
p
We connect you with experts from the tech industry, communities, and government to help you turn federal open data into life-changing tech, faster.
statistic underline description border
100+
short yellow accent
Consumer-facing digital tools built through our sprints since 2016 <br><br>
statistic-border-right
statistic underline description border
800+
short yellow accent
Contributors including designers, developers, data stewards, and community advocates
statistic-border-right
statistic underline description border
34
short yellow accent
Unique problem statements addressed through TOP
padding-right-3
text person organization image
TOP is building something that is new and really powerful. With government as a convener, it can get people together around a problem who wouldn’t otherwise be working together.
Rob Lalka
Public Democracy
photos/home/headshots/rob-lalka.webp
text person organization image
[TOP] really represents the best of what government can be — a platform for engagement that is so core to our democracy.
Denice Ross
Georgetown University
photos/home/headshots/denice-ross.webp
text person organization image
The emphasis on human-centered design and the opportunity to speak to all of these different advocates and stakeholders was key in creating a product that would actually help the end user.
Ryan Harper
CITI VENTURES
photos/home/headshots/ryan-harper.webp
number title description
1
Identify challenges
Federal agencies and national advocacy organizations identify high-priority challenges facing the public.
number title description
2
Team up
Tech teams from industry and universities sign on to create data-driven, digital products in collaboration with end users, data and policy experts.
number title description accordions
3
Build
Tech teams build products during a 12 week virtual tech development sprint that includes user research, data exploration, and product development. Past products include mapping tools, apps, websites, games, AI algorithms, network visualizations, and more.
aria title steps
milestones
Sprint Milestones
User research: Teams conduct user research and present what they’ve learned about their end user to cross-sector experts for feedback.
Data discovery: Teams explore data sets from across government - curated by TOP - and connect with federal data stewards to present what they’ve learned and ask questions about how to find and work with federal data.
Concept Pitch: Teams present their product concept for feedback.
Beta Demo: Teams present a prototype of their product for feedback.
number title description
4
Launch
Products are launched and showcased at an in-person Demo Day press event in Washington DC.
number title description
5
Reach end users
After the sprint, participants work to ensure products reach end users and move the needle on national challenges. Teams have the option to apply for a financial prize to continue their work.
title description card-color cards
Roles
What participants do in each sprint varies depending on their role.
primary-lightest
title description
Tech Teams
Tech teams build a product through the sprint — whether new or within an existing product or platform—that uses open data to solve one of our sprint problem statements.
title description
Government
Federal agencies identify challenges. Policy and federal data experts provide feedback and share insights about federal data and the policy context.
title description
User Advocates
User advocates offer feedback and insights throughout the sprint. They are community leaders, local or national advocates, and people with direct lived experience in the target challenges.
title description
Product Advisors
Product advisors help tech teams develop products with a viable long term strategy that enables them to reach end users.
title right-include skip-bottom-border left
This is a title
components/two-col-markdown-right.md
true
title body
A great component for displaying two columns of information
You can write simple markdown for a column in frontmatter _(like this left-hand column)_ or include more complex markdown *(like that for the right-hand column)* in a separate file.
title body
Are titles _markdownified, too?_
You betcha!
title body
When should I use a separate markdown file instead of frontmatter?
When you have complex markdown that includes newlines or images.
title body
Other parameters
The component also takes in `skip-top-border` and `skip-bottom-border` params as booleans w/in the `content` param which are useful for when you're stacking multiple two-column components on top of each other and don't want to double-up on the borders or when you want to leave the bottom border off of the last component on a page.

UX Component Library

Browse the components used to create the TOP website. These components are generally an HTML section and 100vw, but they have been put into this container for easier viewing along with their notes. The front matter of this page is filled with sample content that is pulled from an actual page of the site, which will allow you to see the list/dictionary that creates each component. Both the front matter and the page have the components listed alphabetically by file name.

</div>

Some of the components use the same top-level key to determine their content, and therefore they may not successfully render if they are on the same page (because there would therefore be multiple page.[key] references. This isn't too many components, and would be a good first task to get familiar with the setup of the repo.

announcement-banner.html

(Hard coded, content must be changed in the file) {% include announcement-banner.html %} 
<hr>

<h4>banner.html</h4>
(Hard coded, content must be changed in the file)
  {% include gov-banner.html %}

<hr>

<h2>Card components!</h2>

Cards are flexible ways for displaying links and collections of information. They are contained `cards/card.html` and `cards/card-list.html`

The card component is not contained in any grid element and thus not constrained in width. For maximum flexibility, do so outside of the include itself or use the card-list component.

<h4>cards/card-list.html</h4>
<p>The card list is a simple flex box which can display as many cards as you need. Takes in a parameter named <b>content</b> which is an array of card data.</p>
{% include cards/card-list.html content=page.card-list.cards %}

cards/card.html

<p>A single card include displays the following information:</p>
<ul>
  <li>title: the main text of the link on the card</li>
  <li>href: the url the card directs to</li>
  <li>isExternal: include this param if the href is to an external site. DO NOT include it if linking to another page within the TOP site.</li>
  <li>date: can be a string or UTF format. Is formatted in the card html/liquid. Is displayed above the h3 link via css order property for accessibility</li>
  <li>details: text below the link</li>
</ul>
<p>The above params get sent in the CONTENT to the include. In addition, you can send the "utils" parameter to the include which is a string you can use to add classes to the card. Use this to add additional styling. Pre-made classes include:</p>
<ul>
  <li>short-card: displays a card with no dark-blue inner section and a maximum height of "card-lg"</li>
  <li>small-header-card: displays a card with a smaller header than normal. Useful for when your headers are long and won't fit normally.</li>
</ul>
{% assign card = page.demo-cards[ 0 ] %} {% include cards/card.html content=card %}
{% assign card=page.demo-cards[1] %} {% include cards/card.html content=card utils="short-card"%}
{% assign card=page.demo-cards[2] %} {% include cards/card.html content=card utils="small-header-card" %} 
<hr>

<h4>circuit-banner.html</h4>
  {% include circuit-banner.html %}

<hr>

<h4>connecting-banner.html</h4>
  {% include connecting-banner.html %}

<hr>

<h4>connecting-banner-notched.html</h4>
  {% include connecting-banner-notched.html %}

<hr>

<h4>connecting-banner-with-subheader-inverse.html</h4>
  {% include connecting-banner-with-subheader-inverse.html %}

<hr>

<h4>connecting-banner-with-subheader.html</h4>
  {% include connecting-banner-with-subheader.html %}

<hr>

<h4>contact-us.html</h4>
  {% include contact-us.html %}

<hr>

<h4>featured_items.html</h4>
  NOTE: the featured products themselves are listed in the front matter, but the two buttons at the bottom of the component are hard-coded in the HTML as part of the component style itself.
  {% include featured_items.html %}

<hr>

<h4>featured_items_even.html</h4>
  This does not include the buttons. For additional reference, this is included in the COIL page about COIL programs
  {% include featured_items_even.html %}

<hr>

<h4>footer.html</h4>
  NOT mobile responsive, hard coded, and generally needs some work. Has been a "to-do" for a while
  {% include footer.html %}

<hr>

<h4>get-involved.html</h4>
  (early component, quite messy, could be refactored)
  {% include get-involved.html %}

<hr>

<h4>hcd-training.html</h4>
  (Hard coded, and not originally designed to be resuable component but rather to get HCD content from old site added quickly - i.e. hours. Could be refactored to components pretty easily)
  {% include hcd-training.html %}

header-and-subheader.html

{% include header-and-subheader.html %}

hero.html

NOTE, the hero sections are generally not hard coded in each page, but the hero file is long, and changes layout based on the page class. Be sure to include the class in the front matter when adding the hero. Some places, there is text coded in the HTML itself, not in the front-matter {% include hero.html %}

logo-garden.html

(Hard coded, content must be changed in the file) Please see the home page.

navbar.html

(Hard coded, content must be changed in the file) {% include navbar.html %}

news.html

Displays a grid of featured and side items. Takes in a parameter named `content` which is an object with the following properties: featured: card data that is displayed full height in left column side-cards: array of card data that takes up the right hand column. See `_includes/news/news.html` and `pages/news.md` for details. 
  {% include news/news.html %}

offset-footer.html

{% include offset-footer.html %}

sidebar-and-content-primary.html

{% include sidebar-and-content-primary.html %}

sidebar-and-wide-content.html

{% include sidebar-and-wide-content.html %}

single-column-banner-photo-overlay-and-content.html

{% include single-column-banner-photo-overlay-and-content.html %}

single-column-centered-list-dark.html

{% include single-column-centered-list-dark.html %}

single-column-centered-list.html

{% include single-column-centered-list.html %}

single-column-centered-photo-with-overlay.html

{% include single-column-centered-photo-with-overlay.html %}

three-column-narrow-text.html

not hard coded, but some of the keys are more specific than in other component files {% include three-column-narrow-text.html %}

three-column-searchable.html

Designed for the DCH specifically. Pulls data conditionally in data topics (used to filter the datasets, file name ends with topics) and from workforce, earth-sprint, built-sprint, covid yaml files in _/data. Not included for preview, viewable in the DCH when you click into a section

three-column-wide-text.html

not hard coded, but the keys are more specific than in other component files {% include three-column-wide-text.html %}

timeline-progress-section-dark.html

{% include timeline-progress-section-dark.html %}

title-and-content-primary.html

This is a very slight variation of the sidebar and content primary, used for the ASA challenge (see /sprints for preview). The front matter above is commented out, but provides a great example of using p and a as keys to indicate how the content will be shown in html

two-column-and-icon-garden.html

Not particularly well thought out, was built to quickly add some content from the old site that had not been redesigned into the new framework. {% include two-column-and-icon-garden.html %}

two-column-card-text.html

{% include two-column-card-text.html %}

two-column-markdown.html

A very extensible component useful for displaying information in a clean, two-column layout with a title and borders. You can skip the the title and borders by leaving out or passing in the `title`, `skip-top-border`, and `skip-bottom-border` to the component.

Each column's content can be defined as markdown written in the frontmatter (as a collection of title and body items) or as a separate markdown file which you then capture and pass in to the component on its own.

{% capture two-col-right %} {% include_relative {{ page.two-col-markdown.right-include }} %} {% endcapture %} {% include two-column-markdown.html content = page.two-col-markdown right-col = two-col-right %}

two-column-wide-text.html

One of the first components, very messy, should really be refactored {% include two-column-wide-text.html %}

Toolkits

Toolkit-specific components are indicated with toolkit-[component].html For examples of the toolkit components (which are self-contained), check out the /product-development or /topx folder under pages to see how these components are used to create the toolkit pages