San Francisco Design System

Hero banner: Default 

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

        <h1>Mayor&#39;s Office of Housing and Community Development</h1>

        <p class="lead-paragraph">MOHCD supports residents with affordable housing opportunities and essential services to build strong communities.</p>

    </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": "Mayor's Office of Housing and Community Development",
  "lead": "MOHCD supports residents with affordable housing opportunities and essential services to build strong communities."
}

There are no notes for this item.