@oslokommune/punkt-css/dist/css/components/card.min.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

pkt-card{display:block;width:100%}.pkt-card{position:relative;display:flex;align-items:center;width:100%;min-width:12.5rem;padding:1.5rem}.pkt-card .pkt-card__wrapper{display:flex;flex-direction:column;flex:1 1 53%;width:100%;overflow:hidden}.pkt-card.pkt-card--padding-none{padding:0}.pkt-card .pkt-card__heading h1,.pkt-card .pkt-card__heading h2,.pkt-card .pkt-card__heading h3,.pkt-card .pkt-card__heading h4,.pkt-card .pkt-card__heading h5{padding:0;margin:0;font-size:1.875rem;font-weight:400;margin-bottom:.5rem;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__link{text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-card p.pkt-card__subheading{padding:0;margin:0;line-height:unset;margin-bottom:1rem;font-size:1.25rem;font-weight:300;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__metadata{margin-top:1rem;margin-bottom:0;line-height:unset;gap:.5rem}.pkt-card .pkt-card__metadata-lead{font-weight:500}.pkt-card .pkt-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem;margin-top:0}.pkt-card .pkt-card__tags-bottom{margin-top:.5rem;margin-bottom:0}.pkt-card.pkt-card--horizontal{flex-direction:row}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal{flex-direction:column}}.pkt-card.pkt-card--vertical{flex-direction:column;min-width:12.5rem}.pkt-card .pkt-card__image{aspect-ratio:1;flex:1 1 47%;width:100%;overflow:hidden}.pkt-card .pkt-card__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card .pkt-card__image.pkt-card__image-round{border-radius:50%;align-self:unset;max-height:400px;max-width:400px}.pkt-card.pkt-card--horizontal .pkt-card__image{max-width:400px;margin-right:2rem}.pkt-card.pkt-card--horizontal .pkt-card__image-square{align-self:stretch}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal .pkt-card__image{margin-right:0;margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--horizontal .pkt-card__image-square{max-width:unset}}.pkt-card.pkt-card--vertical .pkt-card__image{margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square{aspect-ratio:19/10}@media screen and (max-width: 36rem){.pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square{aspect-ratio:19/10}}.pkt-card .pkt-card__wrapper .pkt-card__link::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);outline:2px solid var(--pkt-color-brand-warm-blue-1000);outline-offset:-2px;outline-color:rgba(0,0,0,0);transition:all .3s ease-in-out}.pkt-card .pkt-card__link-heading{transition:color .2s ease-in-out,text-decoration-color .2s ease-in-out}.pkt-card:hover.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-visible.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-within.pkt-card--border-on-hover .pkt-card__link::before{cursor:pointer;outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card:hover .pkt-card__link-heading,.pkt-card:focus-visible .pkt-card__link-heading,.pkt-card:focus-within .pkt-card__link-heading{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__link:focus{outline:none;box-shadow:none}.pkt-card .pkt-card__link-heading:focus-within{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before{box-shadow:0px 0px 0px 4px var(--pkt-color-brand-purple-1000);outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card.pkt-card--padding-none{outline:none;background-color:rgba(0,0,0,0)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card--outlined,.pkt-card--outlined-beige{background-color:var(--pkt-color-background-default);outline-offset:-4px}.pkt-card--outlined{outline:4px solid var(--pkt-color-grays-gray-100)}.pkt-card--outlined-beige{outline:4px solid var(--pkt-color-brand-light-beige-1000)}.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}