@anoki/fse-ui/dist/components/ui/VerticalCardStepper/VerticalCardStepper.css

FSE UI components library

.vertical-container{position:relative}.vertical-container .timeline{position:relative;display:flex;flex-direction:column}.vertical-container .timeline .step{position:relative;display:flex;align-items:flex-start;gap:18px;min-height:120px}.vertical-container .timeline .step .meta{text-align:right;color:var(--blue-48);align-self:center}.vertical-container .timeline .step .meta .headline{color:var(--text-primary);font-weight:600;font-size:14px;line-height:16px;letter-spacing:0px;text-align:center;margin-bottom:15px}.vertical-container .timeline .step .meta .circle{background-color:var(--text-primary);border-radius:9999px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-bottom:15px;font-weight:600;font-size:18px;line-height:24px;letter-spacing:0px;text-align:center;vertical-align:middle;color:var(--white)}.vertical-container .timeline .step .meta .circle .checkmark{width:10px;height:5px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg)}.vertical-container .timeline .step .meta .day{font-family:Roboto Mono;font-weight:250;font-size:40px;line-height:40px;letter-spacing:0px;text-align:center}.vertical-container .timeline .step .meta .month{font-family:Titillium Web;font-weight:600;font-size:14px;line-height:16px;letter-spacing:0px;text-align:center}.vertical-container .timeline .step .meta .year{font-size:12px;font-family:Titillium Web;font-weight:400;font-size:14px;line-height:16px;letter-spacing:0px;text-align:center}.vertical-container .timeline .step .vertical-line{position:relative;width:3px;background-color:var(--text-primary);flex-shrink:0;align-self:stretch}.vertical-container .timeline .step .vertical-line .dot{width:16px;height:16px;background-color:var(--text-primary);border-radius:9999px;position:absolute;top:50%;transform:translateY(-50%);left:-6px;z-index:10}.vertical-container .timeline .step .card{background:var(--white);border-left:16px solid var(--blue-87);box-shadow:0 8px 16px #00000026;padding:24px;max-width:420px;display:flex;flex-direction:column;gap:10px;margin:8px 0;flex:1}.vertical-container .timeline .step .card .label{color:var(--slate-20);font-weight:600;font-size:14px;line-height:16px;letter-spacing:0px;text-transform:uppercase;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.vertical-container .timeline .step .card .title{color:var(--text-primary);font-weight:600;font-size:24px;line-height:32px;letter-spacing:0px;vertical-align:bottom;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.vertical-container .timeline .step .card .description{color:var(--color-darker);font-weight:400;font-size:16px;line-height:22px;letter-spacing:0%}.vertical-container .timeline .step .card .card-footer{display:flex;justify-content:flex-end;gap:10px}.vertical-container .timeline .step .card .card-footer-detail{font-weight:600;font-size:16px;line-height:16px;letter-spacing:0%;text-transform:uppercase}