Guidances

CSS file

Guidances are components that appear on an application overview whose purpose is to inform a firm owner, contributor, or delegate the status of their case and what, if anything, they will need to do next.

This component, in all instances, needs to answer the following questions:

1. What is the status of my case? (in a conversational tone)
2. What actions do I need to do in order to proceed?

Guidances should also use color in order to convey emergencies, warnings, and success. There is also a neutral option. The color also helps the component stand out from the cards that comprise of application sections.

Guidances can accept open text, such as paragraphs, unordered lists, ordered lists, links, and bold or italic text.

Examples

Here are examples of different types

Neutral example

<div class="sba-c-guidance">
  <div class="sba-c-guidance__header">
    <h2 class="sba-c-guidance__primary-heading">Your application package is ready to submit!</h2>
  </div>
  <div class="sba-c-guidance__section">
    <p>All sections for you and your contributors are complete. Once you submit your application package, you will not be able to make changes.</p>
    <p><a href="#" class="usa-button">Sign and submit</a></p>
  </div>
</div>

Positive example

<div class="sba-c-guidance sba-c-guidance--success">
  <div class="sba-c-guidance__header">
    <h2 class="sba-c-guidance__primary-heading">Your application is being processed by the SBA!</h2>
  </div>
  <div class="sba-c-guidance__section">
    <p>Applications usually take about 90 days to process. There is nothing that you are required to do at this time. Please be available in the event that SBA may contact you or your contributors to request additional information.</p>
  </div>
</div>

Warning example

<div class="sba-c-guidance sba-c-guidance--warning">
  <div class="sba-c-guidance__header">
    <h2 class="sba-c-guidance__primary-heading">Your application has been returned to you.</h2>
  </div>
  <div class="sba-c-guidance__section">
    <p>Please provide the information requested in <a href="#">this message</a> by <strong>Sept. 15th, 2017</strong>.</p>
  </div>
  <div class="sba-c-guidance__section">
    <input type="checkbox" name="update" id="update_made" value="yes">
    <label for="update_made">I have made the requested updates</label>
    <p><a id="resubmit-button" href="#" class="usa-button usa-button-disabled">Resubmit to SBA</a></p>
  </div>
</div>

Emergency example

<div class="sba-c-guidance sba-c-guidance--emergency">
  <div class="sba-c-guidance__header">
    <h2 class="sba-c-guidance__primary-heading">Your application has unfortunately been declined.</h2>
  </div>
  <div class="sba-c-guidance__section">
    <p>SBA's <a href="#">decision letter</a> explains this decision.</p>
    <p>If you don't <a href="#">respond</a> by December 17, 2017 you can't reapply to the 8(a) Business Development program until November 2, 2018.</p>
  </div>
</div>

Guidance

• Use margin utilities to provide top or bottom margins if needed.