x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="tw:space-y-8"> <!-- Callout — constrained width --> <div class="tw:p-6 tw:max-w-7xl tw:mx-auto"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN:</strong> Profile Header (consumer-only)<br> <strong>COMPOSES:</strong> consumer-hero-wash | breadcrumb | badge-success-subtle | tabs </p> <p class="tw:mb-0 tw:text-sm"> Full-width header for provider profile pages. Stacks: breadcrumb row → identity row (72px circular logo · name + verified badge · 160×60 mini-map chip · left-divided contact column) → horizontal-scroll tab strip. Layout-only pattern; composed components keep their own styles. Contact column drops below the identity row on viewports narrower than 1024px. </p> </div> </div> <!-- Live demo — full-bleed --> <header class="profile-header consumer-hero-wash"> <div class="tw:max-w-7xl tw:mx-auto tw:px-6"> <nav class="tw:pt-4" aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">School Profile</li> </ol> </nav> <div class="profile-header-main"> <div class="profile-header-logo"> <span class="tw:text-primary tw:font-bold tw:text-[24px]">GH</span> </div> <div class="profile-header-identity"> <h1 class="profile-header-title">Greenford High School</h1> <div class="profile-header-verified-row"> <span class="badge badge-success-subtle"><i class="fa-regular fa-circle-check" aria-hidden="true"></i> Verified Profile</span> <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-secondary-500">Applicaa<span class="tw:text-primary">One</span></span> </div> </div> <a class="profile-header-map" href="#" aria-label="View Greenford High School in map"> <span class="profile-header-map-chip"><i class="fa-regular fa-location-dot" aria-hidden="true"></i> View in map</span> </a> <ul class="profile-header-contact"> <li class="profile-header-contact-row"> <i class="fa-regular fa-phone" aria-hidden="true"></i> <a href="tel:02085789152">02085789152</a> </li> <li class="profile-header-contact-row"> <i class="fa-regular fa-envelope" aria-hidden="true"></i> <a href="mailto:admin@greenford.ealing.sch.uk">admin@greenford.ealing.sch.uk</a> </li> <li class="profile-header-contact-row"> <i class="fa-regular fa-location-dot" aria-hidden="true"></i> <span>Lady Margaret Rd, Southall UB1 2GU</span> </li> </ul> </div> <div class="profile-header-tabs"> <div class="tabs" role="tablist"> <button class="tab active" role="tab" aria-selected="true" type="button">Overview</button> <button class="tab" role="tab" aria-selected="false" type="button">Reviews</button> <button class="tab" role="tab" aria-selected="false" type="button">Courses</button> <button class="tab" role="tab" aria-selected="false" type="button">Events</button> <button class="tab" role="tab" aria-selected="false" type="button">FAQs</button> </div> </div> </div> </header> <!-- Code reference — constrained width --> <div class="tw:p-6 tw:max-w-7xl tw:mx-auto"> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><header class="profile-header consumer-hero-wash"><div class="tw:max-w-7xl tw:mx-auto tw:px-6"><nav aria-label="Breadcrumb"><ol class="breadcrumb">...</ol></nav><div class="profile-header-main"><div class="profile-header-logo">...</div><div class="profile-header-identity"><h1 class="profile-header-title">...</h1><div class="profile-header-verified-row">...</div></div><a class="profile-header-map" href="#" aria-label="..."><span class="profile-header-map-chip">...</span></a><ul class="profile-header-contact"><li class="profile-header-contact-row">...</li></ul></div><div class="profile-header-tabs"><div class="tabs" role="tablist"><button class="tab active" role="tab">Overview</button>...</div></div></div></header></code> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<div class="tw:space-y-8"> <!-- Callout — constrained width --> <div class="tw:p-6 tw:max-w-7xl tw:mx-auto"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN:</strong> Profile Header (consumer-only)<br> <strong>COMPOSES:</strong> consumer-hero-wash | breadcrumb | badge-success-subtle | tabs </p> <p class="tw:mb-0 tw:text-sm"> Full-width header for provider profile pages. Stacks: breadcrumb row → identity row (72px circular logo · name + verified badge · 160×60 mini-map chip · left-divided contact column) → horizontal-scroll tab strip. Layout-only pattern; composed components keep their own styles. Contact column drops below the identity row on viewports narrower than 1024px. </p> </div> </div> <!-- Live demo — full-bleed --> <header class="profile-header consumer-hero-wash"> <div class="tw:max-w-7xl tw:mx-auto tw:px-6"> <nav class="tw:pt-4" aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">School Profile</li> </ol> </nav> <div class="profile-header-main"> <div class="profile-header-logo"> <span class="tw:text-primary tw:font-bold tw:text-[24px]">GH</span> </div> <div class="profile-header-identity"> <h1 class="profile-header-title">Greenford High School</h1> <div class="profile-header-verified-row"> <span class="badge badge-success-subtle"><i class="fa-regular fa-circle-check" aria-hidden="true"></i> Verified Profile</span> <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-secondary-500">Applicaa<span class="tw:text-primary">One</span></span> </div> </div> <a class="profile-header-map" href="#" aria-label="View Greenford High School in map"> <span class="profile-header-map-chip"><i class="fa-regular fa-location-dot" aria-hidden="true"></i> View in map</span> </a> <ul class="profile-header-contact"> <li class="profile-header-contact-row"> <i class="fa-regular fa-phone" aria-hidden="true"></i> <a href="tel:02085789152">02085789152</a> </li> <li class="profile-header-contact-row"> <i class="fa-regular fa-envelope" aria-hidden="true"></i> <a href="mailto:admin@greenford.ealing.sch.uk">admin@greenford.ealing.sch.uk</a> </li> <li class="profile-header-contact-row"> <i class="fa-regular fa-location-dot" aria-hidden="true"></i> <span>Lady Margaret Rd, Southall UB1 2GU</span> </li> </ul> </div> <div class="profile-header-tabs"> <div class="tabs" role="tablist"> <button class="tab active" role="tab" aria-selected="true" type="button">Overview</button> <button class="tab" role="tab" aria-selected="false" type="button">Reviews</button> <button class="tab" role="tab" aria-selected="false" type="button">Courses</button> <button class="tab" role="tab" aria-selected="false" type="button">Events</button> <button class="tab" role="tab" aria-selected="false" type="button">FAQs</button> </div> </div> </div> </header> <!-- Code reference — constrained width --> <div class="tw:p-6 tw:max-w-7xl tw:mx-auto"> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><header class="profile-header consumer-hero-wash"><div class="tw:max-w-7xl tw:mx-auto tw:px-6"><nav aria-label="Breadcrumb"><ol class="breadcrumb">...</ol></nav><div class="profile-header-main"><div class="profile-header-logo">...</div><div class="profile-header-identity"><h1 class="profile-header-title">...</h1><div class="profile-header-verified-row">...</div></div><a class="profile-header-map" href="#" aria-label="..."><span class="profile-header-map-chip">...</span></a><ul class="profile-header-contact"><li class="profile-header-contact-row">...</li></ul></div><div class="profile-header-tabs"><div class="tabs" role="tablist"><button class="tab active" role="tab">Overview</button>...</div></div></div></header></code> </div> </div></div>No notes provided.
No params configured.