An official website of the United States government 
The purpose of this page is to serve as a space for QA design components. After QA is complete, this page can be reshaped to serve as a guide to ASC staff who are managing the web content. It will include layout and formatting guidance, as well as general best practices.
This is intro text. It should be a maximum of 3 lines on desktop. This text provides an expanded explanation of the page and take pressure off needed an unattractive and lengthy title. Links should never be included here.
- How should a "more" link be added?
- Shouldn't this be fielded and formatted per the style guide since its a repeating style?
- Looks like this is being added with a "calloutlink" class
This is the body field. When I removed this text the layout broke and all text expanded full width across the page.
Subtitle text in the top content area; this text is not formatted, avoid this field unless advised otherwise.
Top content paragraph body field - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
List Widget (called icon widget in XD style guide)
List Widget Two Column Blue Background Test
List (icon widget in pdf guide) Widget Gray With Background
This is an Icon Widget 2 Column
This text should be a brief description of what the user will find if they click the title link above.
This text should be a brief description of what the user will find if they click the title link above.
Icon Widget 3 Column
This text should be a brief description of what the user will find if they click the title title link above.
This text should be a brief description of what the user will find if they click the title link above.
This text should be a brief description of what the user will find if they click the title link above.
3 Column Card Widget with Gray Texture
!!BUG!! Text headers should appear centered.
There should be a gray background behind this widget.
Titles should not be linked. Select background Gray in the card widget to achieve this look.
Card Widget with Images
This text should be a brief description of what the user will find if they click the button below. A button appears below but I could have chosen to display a link. The button or link should be optional.
This text should be a brief description of what the user will find if they click the button below. There is an option to display background color below but I haven't selected one.
List Widget, No Images, With Buttons
3 Column Card Widget With Images
This text should be a brief description of what the user will find if they click the button below.
This text should be a brief description of what the user will find if they click the button below. Only button option is available.
This text should be a brief description of what the user will find if they click the button below. Only button option is available.
Card Widget with Linked Text and Gray Background
To update your information, email ASC at webmaster@asc.gov. The linking issue has been reported in DAG2-152.
Additional information and functions related to your State are available by logging into the Extranet.
General Heading for Icon Widget White Background
This text should be a brief description of what the user will find if they click the title link above.
Kristin's Design Mission Control Plan
- Set up pattern library page to serve as a quick reference sheet (done)
- Review how design patterns were fielded and named in drupal
- Review how patterns were styled with CSS and coded in HTML for accessibility and ensure compliance.
- Review actual pages and content to determine where content needs do and do not lend itself to the design patterns available
- determine if new patterns need to be created
- determine if new fields need to be added to existing patterns
- determine if we can eliminate any insured patterns that haven't been coded yet
Ticketing Task
- Enter tickets to cleanup designs
- Find existing page-specific tickets and reshape the design guidance if needed
Challenges
- Jira tickets are set up in a page-by-page basis
- It's hard to tell what guidance was provided in the content guide and how that maps to the design patterns <--was this a process gap?
- There are links and tickets scattered making it hard to focus on a single task
- Many of the design elements were added in WYSIWYG areas. This is ok for one-off but this is not a sustainable solution for long-term management.
- 12/14/21 - learned we can not make global changes since CSS is shared with Hotline.
- can we use separate sheets? Thats the long term plan but we're just getting pages presentable now
- we're taking the inefficient route and creating technical debt, design debt
- we should report everything now
- concern - we're becoming more and more tangled
Text 3 Column General Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Text 2 Column General Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Text 3 Column Header <-CAN AN H2 field be added to this paragraph?
Ideally, we need more fields available in this widget. It needs a General Heading H2 and a Subheading field. It's best if we can avoid formatting in the wysiwyg editor. This is a sample link.
Ideally, we need more fields available in this widget. It needs a General Heading H2 and a Subheading field. It's best if we can avoid formatting in the wysiwyg editor. This is a sample link.
Ideally, we need more fields available in this widget. It needs a General Heading H2 and a Subheading field. It's best if we can avoid formatting in the wysiwyg editor. This is a sample link.
This is an example of a Block Reference. I'm not sure if this maps to a pattern in the style guide. This is a test. It appears that this allows you to pull in other content "blocks". There are probably 100 options available in the dropdown in drupal (none have been selected in this test)
Call to Action Widget
ASC Website Content Entry Best Practices
Do this
- Do enter content in the designated field when possible
- Do create a clean and easy to browse layout by using the widgets available
- When writing lengthy content, cleanly construct the page using h2-h6 tags and paragraph formatting by using the wysiwgy editor
Avoid this
- Placing a lot of design elements in the wysiwyg field with divs and css. Sometimes this is necessary. It's okay for:
- quick page builds
- to achieve a look not possible with established widgets
Why avoid this?
- It creates design and technical debt
- Elements can't easily be managed with CSS
- Page layout falls apart easily (margins different from widgets, etc)
- It's challenging to achieve ideal results on mobile
- This creates a lot of confusion for folks who need to edit pages and aren't html/css savvy
If you need to add elements in the wysiwgy editor, pull from these options:
Sample Elements that can be added to the WYSIWYG Area
<p><a class="button desktop-button-red-large" href="#">Large Button</a></p>
<p><a class="button desktop-button-navy-blue-large" href="#">Large Button</a></p>
!!BUG!! button text should appear blue <p><a class="button desktop-button-white-large" href="#">Large Button</a></p>
We need a small button
We need a medium button
Callout Links
<p><a class="calloutlinks" href="/states">Find State Agencies</a></p>
Right Feature Area
ASC Compliance Review Manual
June 17, 2014
(adopted by the ASC December 21, 2017)
News & Events