| title |
permalink |
layout |
hero |
tagline |
intro |
graphics |
Home |
/home |
home |
| image |
callout |
button |
link |
content |
/assets/uswds/img/hero.png |
| alt |
text |
Check da rules: |
What do the rules look like? |
|
| href |
text |
/rules/a11y |
See the A11y Rules |
|
| text |
href |
Link to more about that priority |
/link/ |
|
Support the callout with some short explanatory text. You don't need more than a couple of sentences. |
|
Click the nav bar and such. |
I added some pages and such to the nav bar. All these files are machine readable
I put some placeholder stuff there, but we can define it however you want. Now that I have it in a machine readable format, things are peachy. Definitions are managed in a csv file, so you add a n item to it and it is prettified.
Not sure if a table is the best way to show this data, let me know what you think about the other USWDS thingies.
[View the USWDS Components]( https://designsystem.digital.gov/components/overview/){: .usa-button.usa-button--big target="_blank"}
|
| image |
title |
description |
| src |
alt |
/assets/uswds/img/circle-124.png |
|
|
Graphic headings can vary. |
Graphic headings can be used a few [different ways](javascript:void(0);), depending on what your landing page is for. Highlight your values, specific program areas, or results. |
|
| image |
title |
description |
| src |
alt |
/assets/uswds/img/circle-124.png |
|
|
Stick to 6 or fewer words. |
Keep body text to about 30. They can be shorter, but try to be somewhat balanced across all four. It creates a clean appearance with good spacing. |
|
| image |
title |
description |
| src |
alt |
/assets/uswds/img/circle-124.png |
|
|
Never highlight anything without a goal. |
For anything you want to highlight here, understand what your users know now, and what activity or impression you want from them after they see it. |
|
| image |
title |
description |
| src |
alt |
/assets/uswds/img/circle-124.png |
|
|
Could also have 2 or 6. |
In addition to your goal, find out your users’ goals. [What do they want to know]( https://18f.gsa.gov/) or do that supports your mission? Use these headings to show those. |
|
|
{:.font-heading-xl.margin-y-0"}
Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.
{:.usa-intro }
Call to action{: .usa-button.usa-button--big }