← User Profiles / profile-pro-dossier-v1 v1.0.0 /api/v1/views/profile-pro-dossier-v1/1.0.0 ↗ /latest ↗
Live render
Fixture data populated via demo CSOM scriptRaw shipped HTML
Exact bytes returned by/api/v1/views/profile-pro-dossier-v1/1.0.0 15,711 bytes <mf-view>
<style>
mf-profile-pro-dossier-v1 {
mf-profile-pro {
--mppr-bg: #0f1114;
--mppr-bg-raised: #161a1f;
--mppr-bg-card: #1a1f26;
--mppr-border: #262c35;
--mppr-border-soft: #1e242c;
--mppr-text: #e6e9ec;
--mppr-text-muted: #8a939d;
--mppr-text-dim: #5c636c;
--mppr-accent: #2dd4bf;
--mppr-accent-soft: rgba(45, 212, 191, 0.12);
--mppr-warn: #f59e0b;
--mppr-available: #34d399;
--mppr-available-soft: rgba(52, 211, 153, 0.12);
--mppr-radius: 5px;
display: grid;
grid-template-columns: 58fr 40fr;
column-gap: 28px;
row-gap: 0;
max-width: 820px;
margin: 0 auto;
padding: 0 28px 28px;
font-family: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 13.5px;
line-height: 1.5;
color: var(--mppr-text);
background: var(--mppr-bg);
border-radius: var(--mppr-radius);
overflow: hidden;
}
mf-profile-pro *,
mf-profile-pro *::before,
mf-profile-pro *::after { box-sizing: border-box; }
/* HEADER spans both columns */
mf-pro-header {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 28px 0 20px;
margin: 0 0 22px;
border-bottom: 1px solid var(--mppr-border-soft);
}
mf-pro-avatar {
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #1c222a;
}
mf-pro-identity { display: block; flex: 1; min-width: 0; }
mf-pro-name {
display: block;
margin: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--mppr-text);
}
mf-pro-title {
display: block;
color: var(--mppr-text-muted);
font-size: 13.5px;
margin-top: 2px;
}
mf-pro-meta {
display: flex;
gap: 14px;
color: var(--mppr-text-dim);
font-size: 11.5px;
margin-top: 8px;
flex-wrap: wrap;
}
mf-pro-meta-location,
mf-pro-meta-joined {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* COLUMN STACKS — each column flows independently */
mf-pro-col-left,
mf-pro-col-right {
display: flex;
flex-direction: column;
gap: 22px;
min-width: 0;
}
mf-pro-col-left { grid-column: 1; }
mf-pro-col-right { grid-column: 2; }
/* Section heading pseudo-elements */
mf-pro-bio::before,
mf-pro-experience-list::before,
mf-pro-credits::before,
mf-pro-skills::before,
mf-pro-secondary-skills::before,
mf-pro-education-list::before {
display: block;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--mppr-text-dim);
margin-bottom: 8px;
}
/* LEFT COLUMN ITEMS */
mf-pro-bio {
display: block;
font-size: 13px;
line-height: 1.6;
color: var(--mppr-text-muted);
}
mf-pro-bio::before { content: "PROFESSIONAL PROFILE"; }
mf-pro-experience-list { display: block; }
mf-pro-experience-list::before { content: "PROFESSIONAL EXPERIENCE"; margin-bottom: 12px; }
mf-pro-experience {
display: block;
padding-left: 14px;
border-left: 1px solid var(--mppr-border-soft);
position: relative;
margin-bottom: 14px;
}
mf-pro-experience:last-child { margin-bottom: 0; }
mf-pro-experience::before {
content: '';
position: absolute;
left: -4px;
top: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mppr-accent);
}
mf-pro-experience-period {
display: block;
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 10.5px;
color: var(--mppr-accent);
letter-spacing: 0.05em;
text-transform: uppercase;
}
mf-pro-experience-role {
display: inline;
font-size: 13.5px;
font-weight: 600;
color: var(--mppr-text);
}
mf-pro-experience-company {
display: inline;
font-weight: 500;
color: var(--mppr-text-muted);
margin-left: 4px;
}
mf-pro-experience-location {
display: block;
color: var(--mppr-text-dim);
font-size: 11.5px;
margin-top: 1px;
}
mf-pro-experience-note {
display: block;
font-size: 12.5px;
color: var(--mppr-text-muted);
margin-top: 4px;
line-height: 1.5;
}
mf-pro-credits { display: block; }
mf-pro-credits::before { content: "SELECTED CREDITS"; }
mf-pro-credit {
display: grid;
grid-template-columns: 64px 1fr 110px;
column-gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--mppr-border-soft);
font-size: 12px;
align-items: start;
}
mf-pro-credit:first-of-type { border-top: none; }
mf-pro-credit-year {
display: block;
grid-column: 1;
grid-row: 1 / span 2;
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color: var(--mppr-text-dim);
font-size: 11px;
}
mf-pro-credit-title {
display: block;
grid-column: 2;
grid-row: 1;
font-weight: 500;
color: var(--mppr-text);
}
mf-pro-credit-client {
display: block;
grid-column: 2;
grid-row: 2;
font-size: 11px;
color: var(--mppr-text-dim);
margin-top: 2px;
}
mf-pro-credit-role {
display: block;
grid-column: 3;
grid-row: 1;
font-size: 11.5px;
color: var(--mppr-text-muted);
}
mf-pro-credit-studio {
display: block;
grid-column: 3;
grid-row: 2;
font-size: 11px;
color: var(--mppr-text-dim);
margin-top: 2px;
}
/* RIGHT COLUMN ITEMS */
mf-pro-availability {
display: block;
padding: 12px 14px 8px;
background: var(--mppr-available-soft);
border: 1px solid rgba(52, 211, 153, 0.2);
border-bottom: none;
border-radius: 5px 5px 0 0;
}
mf-pro-availability-state {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--mppr-available);
font-size: 12px;
font-weight: 600;
}
mf-pro-availability-state::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mppr-available);
box-shadow: 0 0 6px var(--mppr-available);
}
mf-pro-availability-note {
display: block;
font-size: 12px;
color: var(--mppr-text);
margin-top: 8px;
line-height: 1.5;
}
mf-pro-availability-updated { display: none; }
mf-pro-rate {
display: block;
margin-top: -22px;
padding: 0 14px 12px;
background: var(--mppr-available-soft);
border: 1px solid rgba(52, 211, 153, 0.2);
border-top: none;
border-radius: 0 0 5px 5px;
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px;
color: var(--mppr-accent);
}
mf-pro-skills { display: block; }
mf-pro-skills::before { content: "KEY SKILLS"; }
mf-pro-skill {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
mf-pro-skill:last-child { margin-bottom: 0; }
mf-pro-skill-name {
display: inline;
flex: 1;
font-size: 12.5px;
color: var(--mppr-text);
}
mf-pro-skill-name::before {
content: "\2713";
color: var(--mppr-accent);
font-weight: 700;
margin-right: 6px;
}
mf-pro-skill-years {
display: inline;
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color: var(--mppr-text-dim);
font-size: 10.5px;
}
mf-pro-skill-level { display: none; }
mf-pro-secondary-skills { display: block; font-size: 0; }
mf-pro-secondary-skills::before {
content: "SOFTWARE & TOOLS";
font-size: 10.5px;
}
mf-pro-secondary-skill {
display: inline-block;
margin: 0 4px 4px 0;
padding: 3px 9px;
border-radius: 12px;
background: var(--mppr-bg-raised);
color: var(--mppr-text-muted);
font-size: 10.5px;
font-weight: 500;
border: 1px solid var(--mppr-border-soft);
white-space: nowrap;
line-height: 1.4;
vertical-align: middle;
}
mf-pro-secondary-skill:empty { display: none; }
mf-pro-education-list { display: block; }
mf-pro-education-list::before { content: "EDUCATION & TRAINING"; }
mf-pro-education { display: block; margin-bottom: 10px; }
mf-pro-education:last-child { margin-bottom: 0; }
mf-pro-education-period {
display: block;
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 10.5px;
color: var(--mppr-accent);
}
mf-pro-education-qual {
display: block;
font-size: 12.5px;
font-weight: 500;
color: var(--mppr-text);
}
mf-pro-education-inst {
display: block;
font-size: 11px;
color: var(--mppr-text-dim);
}
/* empty-state collapse */
mf-pro-name:empty,
mf-pro-title:empty,
mf-pro-bio:empty,
mf-pro-rate:empty,
mf-pro-meta-location:empty,
mf-pro-meta-joined:empty,
mf-pro-availability-state:empty,
mf-pro-availability-note:empty,
mf-pro-skill-name:empty,
mf-pro-skill-years:empty,
mf-pro-credit-title:empty,
mf-pro-credit-year:empty,
mf-pro-credit-role:empty,
mf-pro-credit-studio:empty,
mf-pro-credit-client:empty,
mf-pro-experience-period:empty,
mf-pro-experience-role:empty,
mf-pro-experience-company:empty,
mf-pro-experience-location:empty,
mf-pro-experience-note:empty,
mf-pro-education-period:empty,
mf-pro-education-qual:empty,
mf-pro-education-inst:empty { display: none; }
@media (max-width: 700px) {
mf-profile-pro {
grid-template-columns: 1fr;
}
mf-pro-col-right { grid-column: 1; }
}
}
</style>
<mf-profile-pro-dossier-v1 version="1.0.0"><mf-profile-pro>
<mf-pro-header>
<mf-pro-avatar></mf-pro-avatar>
<mf-pro-identity>
<mf-pro-name></mf-pro-name>
<mf-pro-title></mf-pro-title>
<mf-pro-meta>
<mf-pro-meta-location></mf-pro-meta-location>
<mf-pro-meta-joined></mf-pro-meta-joined>
</mf-pro-meta>
</mf-pro-identity>
</mf-pro-header>
<mf-pro-col-left>
<mf-pro-bio></mf-pro-bio>
<mf-pro-experience-list>
<mf-pro-experience>
<mf-pro-experience-period></mf-pro-experience-period>
<mf-pro-experience-role></mf-pro-experience-role>
<mf-pro-experience-company></mf-pro-experience-company>
<mf-pro-experience-location></mf-pro-experience-location>
<mf-pro-experience-note></mf-pro-experience-note>
</mf-pro-experience>
<mf-pro-experience>
<mf-pro-experience-period></mf-pro-experience-period>
<mf-pro-experience-role></mf-pro-experience-role>
<mf-pro-experience-company></mf-pro-experience-company>
<mf-pro-experience-location></mf-pro-experience-location>
<mf-pro-experience-note></mf-pro-experience-note>
</mf-pro-experience>
<mf-pro-experience>
<mf-pro-experience-period></mf-pro-experience-period>
<mf-pro-experience-role></mf-pro-experience-role>
<mf-pro-experience-company></mf-pro-experience-company>
<mf-pro-experience-location></mf-pro-experience-location>
<mf-pro-experience-note></mf-pro-experience-note>
</mf-pro-experience>
</mf-pro-experience-list>
<mf-pro-credits>
<mf-pro-credit>
<mf-pro-credit-title></mf-pro-credit-title>
<mf-pro-credit-year></mf-pro-credit-year>
<mf-pro-credit-role></mf-pro-credit-role>
<mf-pro-credit-studio></mf-pro-credit-studio>
<mf-pro-credit-client></mf-pro-credit-client>
</mf-pro-credit>
<mf-pro-credit>
<mf-pro-credit-title></mf-pro-credit-title>
<mf-pro-credit-year></mf-pro-credit-year>
<mf-pro-credit-role></mf-pro-credit-role>
<mf-pro-credit-studio></mf-pro-credit-studio>
<mf-pro-credit-client></mf-pro-credit-client>
</mf-pro-credit>
<mf-pro-credit>
<mf-pro-credit-title></mf-pro-credit-title>
<mf-pro-credit-year></mf-pro-credit-year>
<mf-pro-credit-role></mf-pro-credit-role>
<mf-pro-credit-studio></mf-pro-credit-studio>
<mf-pro-credit-client></mf-pro-credit-client>
</mf-pro-credit>
<mf-pro-credit>
<mf-pro-credit-title></mf-pro-credit-title>
<mf-pro-credit-year></mf-pro-credit-year>
<mf-pro-credit-role></mf-pro-credit-role>
<mf-pro-credit-studio></mf-pro-credit-studio>
<mf-pro-credit-client></mf-pro-credit-client>
</mf-pro-credit>
<mf-pro-credit>
<mf-pro-credit-title></mf-pro-credit-title>
<mf-pro-credit-year></mf-pro-credit-year>
<mf-pro-credit-role></mf-pro-credit-role>
<mf-pro-credit-studio></mf-pro-credit-studio>
<mf-pro-credit-client></mf-pro-credit-client>
</mf-pro-credit>
<mf-pro-credit>
<mf-pro-credit-title></mf-pro-credit-title>
<mf-pro-credit-year></mf-pro-credit-year>
<mf-pro-credit-role></mf-pro-credit-role>
<mf-pro-credit-studio></mf-pro-credit-studio>
<mf-pro-credit-client></mf-pro-credit-client>
</mf-pro-credit>
</mf-pro-credits>
</mf-pro-col-left>
<mf-pro-col-right>
<mf-pro-availability>
<mf-pro-availability-state></mf-pro-availability-state>
<mf-pro-availability-note></mf-pro-availability-note>
<mf-pro-availability-updated></mf-pro-availability-updated>
</mf-pro-availability>
<mf-pro-rate></mf-pro-rate>
<mf-pro-skills>
<mf-pro-skill>
<mf-pro-skill-name></mf-pro-skill-name>
<mf-pro-skill-level></mf-pro-skill-level>
<mf-pro-skill-years></mf-pro-skill-years>
</mf-pro-skill>
<mf-pro-skill>
<mf-pro-skill-name></mf-pro-skill-name>
<mf-pro-skill-level></mf-pro-skill-level>
<mf-pro-skill-years></mf-pro-skill-years>
</mf-pro-skill>
<mf-pro-skill>
<mf-pro-skill-name></mf-pro-skill-name>
<mf-pro-skill-level></mf-pro-skill-level>
<mf-pro-skill-years></mf-pro-skill-years>
</mf-pro-skill>
<mf-pro-skill>
<mf-pro-skill-name></mf-pro-skill-name>
<mf-pro-skill-level></mf-pro-skill-level>
<mf-pro-skill-years></mf-pro-skill-years>
</mf-pro-skill>
<mf-pro-skill>
<mf-pro-skill-name></mf-pro-skill-name>
<mf-pro-skill-level></mf-pro-skill-level>
<mf-pro-skill-years></mf-pro-skill-years>
</mf-pro-skill>
<mf-pro-skill>
<mf-pro-skill-name></mf-pro-skill-name>
<mf-pro-skill-level></mf-pro-skill-level>
<mf-pro-skill-years></mf-pro-skill-years>
</mf-pro-skill>
</mf-pro-skills>
<mf-pro-secondary-skills>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
<mf-pro-secondary-skill></mf-pro-secondary-skill>
</mf-pro-secondary-skills>
<mf-pro-education-list>
<mf-pro-education>
<mf-pro-education-period></mf-pro-education-period>
<mf-pro-education-qual></mf-pro-education-qual>
<mf-pro-education-inst></mf-pro-education-inst>
</mf-pro-education>
<mf-pro-education>
<mf-pro-education-period></mf-pro-education-period>
<mf-pro-education-qual></mf-pro-education-qual>
<mf-pro-education-inst></mf-pro-education-inst>
</mf-pro-education>
</mf-pro-education-list>
</mf-pro-col-right>
</mf-profile-pro></mf-profile-pro-dossier-v1></mf-view>