Patterns

2.6.15

Record Hero

 Anchor  

Record Hero

Record Name

Detail 1
Detail Value 1
Address
1111 Street, Fl, New York, NY
Last Updated
August 25, 2020

This is a description of the record you are viewing.

<section class="c-record-hero">
  <div class="c-record-hero__body">
    <header class="c-record-hero__header">
      <h2>
        <svg aria-hidden="true" class="icon-ui mie-1">
          <use xlink:href="#feather-user"></use>
        </svg>Record Name
      </h2>
    </header>
    <div class="c-record-hero__details">
      <dl class="c-record-hero__description-list grid grid-cols-3">
        <dt>Detail 1</dt>
        <dd class="col-span-2 mb-0">Detail Value 1</dd>
        <dt>Address</dt>
        <dd class="col-span-2 mb-0">1111 Street, Fl, New York, NY</dd>
        <dt>Last Updated</dt>
        <dd class="col-span-2 mb-0">August 25, 2020</dd>
      </dl>
    </div>
    <p>This is a description of the record you are viewing.</p>
  </div>
</section>

The Record Hero Component can be used as a heading index card that describes a data record or data set in an application.

 Anchor  

Record Hero Alt

Record Name

Record Badge
Record Created
June 25, 2020
Last Updated
August 25, 2020

The Department of Homeless Services' (DHS) Client Assistance and Re-housing System (CARES) is used internally by the DHS Family Services division to track information about families that have applied for emergency shelter.

Date Started
June 25, 2020
Steward

Name of data manager, Dept.

email@contact.nyc.gov 
<section class="c-record-hero desktop:grid grid-cols-8">
  <div class="c-record-hero__body col-span-5">
    <header class="c-record-hero__header">
      <h2>Record Name</h2>
    </header>
    <div class="c-record-hero__details">
      <mark class="badge bg-base-white">
        <svg aria-hidden="true" class="icon-ui mie-1 text-red">
          <use xlink:href="#feather-file-text"></use>
        </svg>Record Badge
      </mark>
      <dl class="c-record-hero__description-list">
        <dt class="small">Record Created</dt>
        <dd>June 25, 2020</dd>
      </dl>
      <dl class="c-record-hero__description-list">
        <dt class="small">Last Updated</dt>
        <dd>August 25, 2020</dd>
      </dl>
    </div>
    <p>The Department of Homeless Services' (DHS) Client Assistance and Re-housing System (CARES) is used internally by the DHS Family Services division to track information about families that have applied for emergency shelter.</p>
  </div>
  <div class="c-record-hero__body col-span-3 bg-blue-20t">
    <dl class="c-record-hero__description-list flex flex-col mb-3">
      <dt class="small">Date Started</dt>
      <dd>June 25, 2020</dd>
      <dt class="small">Steward</dt>
      <dl>
        <p class="mb-0">Name of data manager, Dept.</p>
        <a class="inline-flex" href="#">
          <svg aria-hidden="true" class="icon-ui mie-1">
            <use xlink:href="#feather-mail"></use>
          </svg>email@contact.nyc.gov
        </a>
      </dl>
    </dl>
  </div>
</section>

The Component can be styled for different contexts Tailwindcss utilities.