San Francisco Design System

Hero banner: Form 

<div class="hero-banner default">
    <div>

        <div class="form-header-meta">
            <h2>Apply for an accessory dwelling unit permit</h2>

            <div class="form-progress">

                <div class="form-progress-bar form-progress-bar-30">30% done</div>

            </div>
        </div>

        <h1>Construction impact</h1>

    </div>
</div>
 
<div class="hero-banner default">
  <div>
    {% if form_title %}
      <div class="form-header-meta">
        <h2>{{ form_title }}</h2>

        <div class="form-progress">
          {% if short %}
            <div class="form-progress-bubble">Page 1 of 5</div>
          {% else %}
            <div class="form-progress-bar form-progress-bar-{{ percent }}">{{ percent }}% done</div>
          {% endif %}
        </div>
      </div>
    {% endif %}

    <h1>{{ title }}</h1>
    {% if lead %}
      <p class="lead-paragraph">{{ lead }}</p>
    {% endif %}
  </div>
</div>
 
{
  "title": "Construction impact",
  "lead": false,
  "form_title": "Apply for an accessory dwelling unit permit",
  "percent": 30
}

There are no notes for this item.