Components

Product set components

Mini profile

• Last, First

  A1234BC
• Date of birth27/09/1998
• EstablishmentHMP Prison
• Cell numberA-1-1
• StatusReleased

The mini profile shows key information about a prisoner at the top of a question or transactional service page. This helps to:

• reassure users that they’re looking at the correct record
• provide relevant key information throughout a journey (such as prison number or location)

The mini profile is a variation of the design used on the DPS prisoner profile.

Research on this component

Full documentation on this component

Contents

<div class="mini-profile govuk-!-margin-top-7" data-qa="mini-profile">
        <div class="mini-profile-inner">
            <div class="mini-profile-left">
                <img class="mini-profile-person-img" src="/assets/images/prisoner-profile-image.png" alt="Image of Last, First" loading="lazy" data-qa="mini-profile-person-img">
            </div>
            <div class="mini-profile-right">
                <ul class="mini-profile-info">
                    <li>
                        <p class="govuk-heading-s govuk-!-margin-bottom-1">
                            <a id="mini-profile-link" class="govuk-link--no-visited-state" href="#" target="_blank" data-qa="mini-profile-person-profile-link">Last, First</a>
                        </p>
                        <span class="govuk-body" data-qa="mini-profile-prisoner-number">A1234BC</span>
                    </li>
                    <li><span class="govuk-heading-s govuk-!-margin-bottom-0 govuk-!-padding-0">Date of birth</span><span class="govuk-body" data-qa="mini-profile-dob">27/09/1998</span></li>
                    <li><span class="govuk-heading-s govuk-!-margin-bottom-0 govuk-!-padding-0">Establishment</span><span class="govuk-body" data-qa="mini-profile-prison-name">HMP Prison</span></li>
                    <li><span class="govuk-heading-s govuk-!-margin-bottom-0 govuk-!-padding-0">Cell number</span><span class="govuk-body" data-qa="mini-profile-cell-location">A-1-1</span></li>
                    <li><span class="govuk-heading-s govuk-!-margin-bottom-0 govuk-!-padding-0">Status</span><span class="govuk-body" data-qa="mini-profile-status">Released</span></li>
                </ul>
            </div>
        </div>
    </div>

{% from "hmpps/components/mini-profile/macro.njk" import miniProfile %}
    
    {% set person = {
        firstName: 'FIRST',
        lastName: 'LAST',
        prisonerNumber: 'A1234BC',
        dateOfBirth: '1998-09-27',
        status: 'Released',
        prisonName: 'HMP Prison',
        cellLocation: 'A-1-1'
    } %}
    
    {{ miniProfile(person, '/assets/images/prisoner-profile-image.png', '#') }}

Required Nunjucks filters

import { personDateOfBirth, personProfileName } from 'hmpps-court-cases-release-dates-design/hmpps/utils/utils'
    
    njkEnv.addFilter('personProfileName', personProfileName)
    njkEnv.addFilter('personDateOfBirth', personDateOfBirth)