Lumen Profile

glass
A profile card with a soft cover, identity details, and elevated actions.
premiumprofilesocialtilt
Open in playground Back to library
Live previewcss renderer
source/lumen-profile-cardlive mode
How it works
3 steps
Preview
See the authored component running live.
Customize
Open the playground to tune its controls.
Ship
Copy the TypeScript source and install what it needs.
Runtime package
Install the requirements

verified from renderer
No external package required.
This product runs from its authored browser renderer and does not need a package install step.
Product contract
Renderer: css
Version: Not published
Preview: live
Controls: 0 authored controls
Source: lumen-profile-card
Usage
Use the authored product, not a screenshot

This product is rendered from its authored design definition. The preview and the React + TypeScript code stay aligned with the same source values.
Stored product brief
A dark abstract glass interactive design: A profile card with a soft cover, identity details, and elevated actions.
Source integrity
Traceable back to the registry

Registry source
lumen-profile-card
Public slug
lumen-profile-card
Renderer
css
Published version
Not published
Playground
Code, API, and integration

lumen-profile-card.tsxTypeScript
import type { CSSProperties } from "react";

const css = ".dp-lumen-profile-card-asset{position:relative;display:grid;place-items:center;padding:0px;opacity:1.00;transform:translate(-3px,0px) perspective(900px) rotateX(0deg) rotateZ(0deg);transform-style:preserve-3d;filter:contrast(0.80) saturate(1.00) hue-rotate(0deg) blur(0.00px) drop-shadow(0 19px 69px rgba(0,0,0,.42));transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease,opacity .35s ease;will-change:transform,filter,opacity;}\n.dp-lumen-profile-card-asset::before{content:\"\";position:absolute;inset:0px;border-radius:28px;background:radial-gradient(circle at 35% 25%,#f9a8d452,transparent 42%),radial-gradient(circle at 66% 72%,#fb71854d,transparent 50%);filter:blur(53px);opacity:0.26;z-index:-1;pointer-events:none;}\n.dp-lumen-profile-card-asset::after{content:\"\";position:absolute;inset:0px;border-radius:28px;border:0px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);opacity:0;pointer-events:none;}\n.dp-lumen-profile-card-stage{--a:#fb7185;--b:#f9a8d4;--deep:#881337;--ink:#eef2ff;--muted:#8f9aad;position:relative;display:grid;place-items:center;width:322px;min-height:233px;color:var(--ink);font-family:ui-sans-serif,system-ui,sans-serif;}.dp-lumen-profile-card-surface{position:relative;width:100%;min-height:100%;border:1px solid rgba(255,255,255,.1);border-radius:25px;background:rgba(17,19,25,.9);box-shadow:0 11px 48px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden;}.dp-lumen-profile-card-eyebrow{font:600 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}.dp-lumen-profile-card-title{margin:0;font-size:18px;line-height:1.1;letter-spacing:-.04em;}.dp-lumen-profile-card-copy{margin:0;color:var(--muted);font-size:11px;line-height:1.55;}.dp-lumen-profile-card-button{border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.08);color:var(--ink);font:600 10px ui-monospace,SFMono-Regular,monospace;padding:9px 11px;}.dp-lumen-profile-card-button:hover{background:rgba(255,255,255,.14);}.dp-lumen-profile-card-still *{animation-play-state:paused!important;}.dp-lumen-profile-card-profile{--mx:50%;--my:26%;--rx:0deg;--ry:0deg;--avx:0px;--avy:0px;--avrx:0deg;--avry:0deg;position:relative;min-height:237px;overflow:hidden;background:#0f0f12;border-radius:25px;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease;will-change:transform;box-shadow:0 20px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);}.dp-lumen-profile-card-profile:hover{box-shadow:0 28px 72px rgba(0,0,0,.30),0 0 36px #fb718514,inset 0 1px 0 rgba(255,255,255,.10);}.dp-lumen-profile-card-cover-wrap{position:relative;height:96px;overflow:hidden;flex:none;background:var(--deep);isolation:isolate;}.dp-lumen-profile-card-cover{position:absolute;inset:-14% -10% 0 -10%;background:radial-gradient(560px 380px at 22% 14%,#fb7185 0%,transparent 62%),radial-gradient(620px 420px at 88% 92%,#f9a8d4 0%,transparent 58%),linear-gradient(168deg,var(--deep) 6%,#15182b 48%,var(--deep) 92%);}.dp-lumen-profile-card-orb-a{position:absolute;left:-8%;top:-18%;width:58%;height:72%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fb7185 0%,transparent 68%);filter:blur(18px);opacity:.55;animation:dp-lumen-profile-card-orb-drift-a 7.86s ease-in-out infinite alternate;}.dp-lumen-profile-card-orb-b{position:absolute;right:-10%;bottom:-20%;width:62%;height:74%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#f9a8d4 0%,transparent 68%);filter:blur(22px);opacity:.48;animation:dp-lumen-profile-card-orb-drift-b 9.29s ease-in-out infinite alternate;}.dp-lumen-profile-card-cover-mesh{position:absolute;inset:0;background:repeating-linear-gradient(116deg,transparent 0 16px,rgba(255,255,255,.04) 16px 17px),radial-gradient(1px 1px at 14% 34%,rgba(255,255,255,.5) 0,transparent 100%),radial-gradient(1px 1px at 72% 18%,rgba(255,255,255,.35) 0,transparent 100%),radial-gradient(1px 1px at 88% 72%,rgba(255,255,255,.3) 0,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent);opacity:.5;}.dp-lumen-profile-card-cover-glare{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.34),transparent 64%);opacity:0;transition:opacity .32s ease;mix-blend-mode:soft-light;pointer-events:none;}.dp-lumen-profile-card-profile:hover .dp-lumen-profile-card-cover-glare,.dp-lumen-profile-card-profile:focus-within .dp-lumen-profile-card-cover-glare{opacity:1;}.dp-lumen-profile-card-cover-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);background-size:240% 100%;background-position:120% 0;opacity:0;mix-blend-mode:soft-light;pointer-events:none;}.dp-lumen-profile-card-profile:hover .dp-lumen-profile-card-cover-shine{opacity:1;animation:dp-lumen-profile-card-shine-sweep 1.15s cubic-bezier(.16,1,.3,1) forwards;}.dp-lumen-profile-card-noise{position:absolute;inset:0;opacity:.055;background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\");mix-blend-mode:soft-light;pointer-events:none;}.dp-lumen-profile-card-cover-ring{position:absolute;inset:10px;border-radius:19px;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);pointer-events:none;}.dp-lumen-profile-card-availability{position:absolute;top:11px;left:11px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(10,12,18,.52);backdrop-filter:blur(16px) saturate(1.6);border:1px solid rgba(255,255,255,.14);color:#eef2ff;font:700 8.5px ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);z-index:1;transform:translateZ(14px);}.dp-lumen-profile-card-availability i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.16),0 0 12px rgba(34,197,94,.65);animation:dp-lumen-profile-card-dot-pulse 2.4s ease infinite;}.dp-lumen-profile-card-avatar-wrap{position:relative;display:flex;justify-content:center;margin-top:-34px;z-index:2;pointer-events:none;transform:translate3d(var(--avx),var(--avy),34px);transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform;}.dp-lumen-profile-card-avatar-orbit{position:relative;padding:3px;border-radius:50%;background:conic-gradient(from 180deg at 50% 50%,#fb7185,#f9a8d4,#fb7185);box-shadow:0 12px 28px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.06);animation:dp-lumen-profile-card-orbit-spin 12.86s linear infinite;}.dp-lumen-profile-card-avatar{position:relative;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,#fb7185,#f9a8d4);color:#fff;border:3px solid #0f0f12;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -8px 18px rgba(0,0,0,.18);transform:rotateX(var(--avrx)) rotateY(var(--avry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform;animation:dp-lumen-profile-card-avatar-breathe 3.21s ease-in-out infinite alternate;}.dp-lumen-profile-card-avatar-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fb7185 0%,transparent 72%);filter:blur(10px);opacity:.45;z-index:-1;animation:dp-lumen-profile-card-glow-pulse 2.29s ease-in-out infinite alternate;}.dp-lumen-profile-card-avatar-initials{font:800 16px ui-monospace,monospace;letter-spacing:.06em;text-shadow:0 1px 0 rgba(0,0,0,.18);transform:translateZ(8px);}.dp-lumen-profile-card-avatar-inner-ring{position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);pointer-events:none;}.dp-lumen-profile-card-dot{position:absolute;right:0px;bottom:0px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2.5px solid #0f0f12;box-shadow:0 3px 10px rgba(0,0,0,.28),0 0 0 4px #fb718518;}.dp-lumen-profile-card-dot:after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(34,197,94,.35);animation:dp-lumen-profile-card-dot-ripple 2.6s ease-out infinite;}.dp-lumen-profile-card-profile-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:14px 20px 18px;transform:translateZ(14px);}.dp-lumen-profile-card-title{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:18px;font-weight:800;letter-spacing:-.035em;line-height:1;}.dp-lumen-profile-card-verified{width:17px;height:17px;display:inline-grid;place-items:center;border-radius:50%;flex:none;filter:drop-shadow(0 2px 8px #fb718555);}.dp-lumen-profile-card-verified svg{width:17px;height:17px;}.dp-lumen-profile-card-eyebrow{display:inline-flex;align-items:center;gap:5px;font:500 11px ui-sans-serif,system-ui,sans-serif;color:var(--muted);letter-spacing:.01em;margin-top:1px;}.dp-lumen-profile-card-pin{width:12px;height:12px;display:grid;place-items:center;color:var(--muted);opacity:.9;}.dp-lumen-profile-card-pin svg{width:12px;height:12px;}.dp-lumen-profile-card-copy{margin:3px 0 0;max-width:252px;color:var(--muted);font:400 12.5px/1.6 ui-sans-serif,system-ui,sans-serif;}.dp-lumen-profile-card-copy em{font-style:normal;font-weight:600;color:var(--ink);}.dp-lumen-profile-card-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin:10px 0 0;padding:12px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);gap:2px;}.dp-lumen-profile-card-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:12px;transition:background .2s ease,transform .2s ease;}.dp-lumen-profile-card-stat:hover{background:rgba(255,255,255,.06);transform:translateY(-1px);}.dp-lumen-profile-card-stat:active{transform:scale(.96);}.dp-lumen-profile-card-stat b{display:block;color:var(--ink);font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1;transition:transform .42s cubic-bezier(.34,1.56,.64,1),color .2s;}.dp-lumen-profile-card-stat b.pop{transform:scale(1.14);color:#fb7185;}.dp-lumen-profile-card-stat span{font:700 7.5px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}.dp-lumen-profile-card-profile-actions{display:flex;gap:9px;width:100%;margin-top:6px;align-items:center;}.dp-lumen-profile-card-follow{position:relative;flex:1;height:42px;border-radius:13px;border:0;background:#ececee;color:#0a0a0c;font:700 13px ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;}.dp-lumen-profile-card-follow:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.14);}.dp-lumen-profile-card-follow:active{transform:scale(.97);}.dp-lumen-profile-card-follow.dp-lumen-profile-card-following{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.14);box-shadow:none;}.dp-lumen-profile-card-follow-idle,.dp-lumen-profile-card-follow-on{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:opacity .30s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1);}.dp-lumen-profile-card-follow-on{opacity:0;transform:translateY(10px) scale(.96);}.dp-lumen-profile-card-follow.dp-lumen-profile-card-following .dp-lumen-profile-card-follow-idle{opacity:0;transform:translateY(-10px) scale(.96);}.dp-lumen-profile-card-follow.dp-lumen-profile-card-following .dp-lumen-profile-card-follow-on{opacity:1;transform:translateY(0) scale(1);}.dp-lumen-profile-card-follow-on:before{content:'✓';display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fb7185;color:#fff;font-size:11px;box-shadow:0 4px 12px #fb718555;}.dp-lumen-profile-card-burst{position:absolute;inset:0;pointer-events:none;opacity:0;}.dp-lumen-profile-card-burst i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fb7185;opacity:0;box-shadow:0 2px 8px rgba(0,0,0,.12);}.dp-lumen-profile-card-follow.dp-lumen-profile-card-following .dp-lumen-profile-card-burst{opacity:1;}.dp-lumen-profile-card-follow.dp-lumen-profile-card-following .dp-lumen-profile-card-burst i{animation:dp-lumen-profile-card-burst-pop .72s cubic-bezier(.16,1,.3,1) forwards;}.dp-lumen-profile-card-burst i:nth-child(1){--x:-46px;--y:-30px;}.dp-lumen-profile-card-burst i:nth-child(2){--x:42px;--y:-32px;background:#f9a8d4;}.dp-lumen-profile-card-burst i:nth-child(3){--x:-40px;--y:28px;background:#f9a8d4;}.dp-lumen-profile-card-burst i:nth-child(4){--x:46px;--y:24px;}.dp-lumen-profile-card-burst i:nth-child(5){--x:0;--y:-44px;background:#22c55e;}.dp-lumen-profile-card-burst i:nth-child(6){--x:0;--y:36px;}.dp-lumen-profile-card-burst i:nth-child(7){--x:-58px;--y:0;background:#fb7185bb;}.dp-lumen-profile-card-burst i:nth-child(8){--x:58px;--y:0;background:#f9a8d4bb;}.dp-lumen-profile-card-message{width:42px;height:42px;flex:none;border-radius:13px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.07);color:var(--ink);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,box-shadow .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}.dp-lumen-profile-card-message:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.16);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.12);}.dp-lumen-profile-card-message:active{transform:scale(.92);}.dp-lumen-profile-card-message svg{width:17px;height:17px;}.dp-lumen-profile-card-message.is-sent{color:#fb7185;border-color:#fb718566;background:#fb718516;box-shadow:0 0 18px #fb718522;}@keyframes dp-lumen-profile-card-orb-drift-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(10%,6%) scale(1.06)}}@keyframes dp-lumen-profile-card-orb-drift-b{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8%,-5%) scale(1.05)}}@keyframes dp-lumen-profile-card-avatar-breathe{0%,100%{transform:rotateX(var(--avrx)) rotateY(var(--avry)) scale(1)}50%{transform:rotateX(var(--avrx)) rotateY(var(--avry)) scale(1.02)}}@keyframes dp-lumen-profile-card-glow-pulse{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.68;transform:scale(1.08)}}@keyframes dp-lumen-profile-card-orbit-spin{to{transform:rotate(360deg)}}@keyframes dp-lumen-profile-card-shine-sweep{0%{background-position:120% 0;opacity:0}18%{opacity:1}100%{background-position:-50% 0;opacity:0}}@keyframes dp-lumen-profile-card-dot-pulse{0%,100%{box-shadow:0 0 0 5px rgba(34,197,94,.16),0 0 12px rgba(34,197,94,.65)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0),0 0 16px rgba(34,197,94,.45)}}@keyframes dp-lumen-profile-card-dot-ripple{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}@keyframes dp-lumen-profile-card-burst-pop{0%{transform:translate(-50%,-50%) scale(0);opacity:1}68%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);opacity:0}}@media (prefers-reduced-motion:reduce){.dp-lumen-profile-card-orb-a,.dp-lumen-profile-card-orb-b,.dp-lumen-profile-card-avatar,.dp-lumen-profile-card-avatar-glow,.dp-lumen-profile-card-avatar-orbit,.dp-lumen-profile-card-burst i{animation:none!important;}}.dp-lumen-profile-card-still .dp-lumen-profile-card-orb-a,.dp-lumen-profile-card-still .dp-lumen-profile-card-orb-b,.dp-lumen-profile-card-still .dp-lumen-profile-card-avatar,.dp-lumen-profile-card-still .dp-lumen-profile-card-avatar-glow,.dp-lumen-profile-card-still .dp-lumen-profile-card-avatar-orbit{animation:none!important;}";
const markup = "<div class=\"dp-lumen-profile-card-asset\"><article class=\"dp-lumen-profile-card-stage\"><div class=\"dp-lumen-profile-card-surface dp-lumen-profile-card-profile\" tabindex=\"0\" role=\"group\" aria-label=\"Profile card\"><div class=\"dp-lumen-profile-card-cover-wrap\"><div class=\"dp-lumen-profile-card-cover\"><div class=\"dp-lumen-profile-card-orb-a\"></div><div class=\"dp-lumen-profile-card-orb-b\"></div></div><div class=\"dp-lumen-profile-card-cover-mesh\"></div><div class=\"dp-lumen-profile-card-cover-glare\"></div><div class=\"dp-lumen-profile-card-cover-shine\"></div><div class=\"dp-lumen-profile-card-noise\"></div><span class=\"dp-lumen-profile-card-availability\"><i></i>Available for work</span><span class=\"dp-lumen-profile-card-cover-ring\"></span></div><div class=\"dp-lumen-profile-card-avatar-wrap\"><div class=\"dp-lumen-profile-card-avatar-orbit\"><div class=\"dp-lumen-profile-card-avatar\"><span class=\"dp-lumen-profile-card-avatar-glow\"></span><span class=\"dp-lumen-profile-card-avatar-initials\">AR</span><span class=\"dp-lumen-profile-card-avatar-inner-ring\"></span><span class=\"dp-lumen-profile-card-dot\"></span></div></div></div><div class=\"dp-lumen-profile-card-profile-body\"><h3 class=\"dp-lumen-profile-card-title\">Alex Rahman<span class=\"dp-lumen-profile-card-verified\" aria-label=\"Verified\"><svg viewBox=\"0 0 16 16\" fill=\"none\"><circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#fb7185\"/><path d=\"M5.2 8.1l1.7 1.7 3.9-3.9\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></span></h3><span class=\"dp-lumen-profile-card-eyebrow\"><span class=\"dp-lumen-profile-card-pin\"><svg viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M6 1.5a3.7 3.7 0 0 0-3.7 3.7c0 2.8 3.7 5.3 3.7 5.3s3.7-2.5 3.7-5.3A3.7 3.7 0 0 0 6 1.5Zm0 4.8a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2Z\" fill=\"currentColor\" opacity=\".9\"/></svg></span>Product designer · Dhaka</span><p class=\"dp-lumen-profile-card-copy\">Designing <em>calm</em> interfaces for dense tools. Currently building Lumen.</p><div class=\"dp-lumen-profile-card-profile-stats\"><button type=\"button\" class=\"dp-lumen-profile-card-stat\" aria-label=\"Followers\"><b data-count=\"12431\">12,431</b><span>Followers</span></button><button type=\"button\" class=\"dp-lumen-profile-card-stat\"><b>318</b><span>Following</span></button><button type=\"button\" class=\"dp-lumen-profile-card-stat\"><b>96</b><span>Posts</span></button></div><div class=\"dp-lumen-profile-card-profile-actions\"><button class=\"dp-lumen-profile-card-follow\" type=\"button\" aria-pressed=\"false\"><span class=\"dp-lumen-profile-card-follow-idle\">Follow</span><span class=\"dp-lumen-profile-card-follow-on\">Following</span><span class=\"dp-lumen-profile-card-burst\" aria-hidden=\"true\"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></button><button class=\"dp-lumen-profile-card-message\" type=\"button\" aria-label=\"Message\"><svg viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 4.5h12v8H8.5L5 15.5v-3H3z\"/></svg></button></div></div></div></article></div>";

const stage: CSSProperties = {
  boxSizing: "border-box",
  width: "100%",
  minHeight: "360px",
  display: "grid",
  alignItems: "center",
  justifyContent: "center",
  padding: "48px 24px",
  overflow: "hidden",
  borderRadius: 28,
  background: "#0b0c10",
};

export function LumenProfile() {
  return (
    <div
      style={stage}
      dangerouslySetInnerHTML={{ __html: "<style>" + css + "</style>" + markup }}
    />
  );
}
Nearby in the library

More glass →
Lumen)))
5284 7160 3948 2071
CARD HOLDERALEX RAHMANVALID THRU09/29PLATINUM
Alex Rahman482
Issued by Lumen Bank. Use of this card is subject to the cardholder agreement.
✦
open