extends ../partials/page-templates/_layout.pug include ../partials/mixins-demo/_nav-components.pug include ../partials/mixins/_list-navigator.pug include ../partials/mixins-demo/_demo-cards.pug include ../partials/mixins/_horizontal-scroll.pug block append variables -var active_nav_item = "components" -var sidebar = true - var page_title = "Component: Cards" block content .page__content__block .text--stamp Component h1 strong Cards p Cards are useful for displaying items of similar type, with various information about each item. h2 Some ways to display cards p You can display cards in various containers. h3 In a grid ul.cards-container.cards-container--grid +demo-cards(8, "Card label", true, true) .page__content__block h3 In a grid with only three cards ul.cards-container.cards-container--grid +demo-cards(3, "Card label", true, true) .page__content__block h3 In a grid with only two cards ul.cards-container.cards-container--grid +demo-cards(2, "Card label", true, true) .page__content__block h3 In a row that scolls horizontally +horizontal-scroll().horizontal-scroll--snap ul.cards-container.cards-container--row +demo-cards(8, "Card label", true).horizontal-scroll__snap-item .page__content__block.page__content__block--no-padding h3 In a row that scolls edge-to-edge +horizontal-scroll().horizontal-scroll--snap ul.cards-container.cards-container--row +demo-cards(8, "Card label", true).horizontal-scroll__snap-item .page__content__block h3 In a row that doesn't scroll on wide screens, but wraps just like a grid +horizontal-scroll().horizontal-scroll--snap.horizontal-scroll--no-scroll-wide ul.cards-container.cards-container--row +demo-cards(8, "Card label", true).horizontal-scroll__snap-item .page__content__block h3 In a column ul.cards-container.cards-container--column +demo-cards(3, "Card label", true) .page__content__block h2 Cards for people ul.cards-container.cards-container--grid.cards-container--grid--wide-cards each name, index in ["Jens Jørgen Hansen", "Benedikte Østergaard Rasmussen", "Claus Stadel", "Svend Bendt"] li.card .card__content .card__section.card__section--profile-image .card__section__content h3.card__title a(href="#")= name .card__details.card__details--primary Ph.D doktormand if name == "Claus Stadel" .card__section__group .card__details AU IT .card__details Brugeroplevelser if name != "Svend Bendt" -var count = index + 1 img.profile-image(srcset="/assets/profile-images/square/default/profile-image-" + count + ".jpg, /assets/profile-images/square/large/profile-image-" + count + ".jpg 2x" src="/assets/profile-images/square/large/profile-image-" + count + ".jpg" alt=name) if name != "Svend Bendt" .card__section ul.tags li.tags__item Billededannede undersøgelser li.tags__item Radioaktiver metoder li.tags__item Nyre og urinveje li.tags__item Pædiatri li.tags__item Hjerne- og nervesystem .page__content__block h2 Cards for Pure content types ul.cards-container.cards-container--grid li.card .card__content .card__section .card__section__content .card__section__group h3.card__title a(href="#") A nonbiodegradable scaffold-free cell sheet of genome-engineered mesenchymal stem cells inhibits development of acute kidney injury .card__subtitle Østergaard, B. et al. - 2021 .card__label Tidsskriftartikel .card__details Kidney International .card__section__end ul.tags li.tags__item Udgivet li.tags__item Fagfællebedømt li.tags__item.tags__item--icon.icon-attachment Digital version vedhæftet li.tags__item.tags__item--icon.icon-link-chain Link til digital version inkluderet li.card .card__content .card__section .card__section__content .card__section__group h3.card__title a(href="#") Non-invasiv måling af perfusion i prostatacancer med 82Rb PET - sammenligning af 82 Rb og 68Ga-PSMA .card__subtitle RUBIPRO .card__label Forskningsprojekt .card__details .u-avoid-wrap 31. jan 2018 | - .u-avoid-wrap 12. nov 2020 .card__section__end .profile-image-stack each val in [1, 2, 3, 4, 5, 6] img.profile-image(src="/assets/profile-images/square/small/profile-image-" + val + ".jpg" alt="") .profile-image.profile-image--placeholder(aria-hidden="true") +34 li.card .card__content .card__section .card__section__content .card__section__group h3.card__title a(href="#") Annual Congress of the European Society for Pediatric Urology, ESPU .card__subtitle Athen, Grækenland .card__label Konferencedeltagelse .card__section__end .card__details .u-avoid-wrap 1. februar 2020 li.card .card__content .card__section .card__section__content h3.card__title a(href="#") Nobelprisen i Medicin .card__label International anerkendelse .card__details Nobelpriskomiteen .card__section__end .card__clip.icon-award 2017 li.card .card__content .card__section .card__section__content .card__section__group h3.card__title a(href="#") P1 Morgen: Indslag om mangel på donernyrer .card__subtitle DR P1 .card__label Radio .card__section__end .card__details 16. juli 2022 .page__content__block h2 Course catalouge cards ul.cards-container.cards-container--column.cards-container--column--wide-cards each state in ["false", "true"] li.card .card__content .card__section.card__section--button h3.card__title.card__title--large a(href="#") Videregående politisk teori: normativ analyse af politiske institutioner og offentlige politikker .card__label Efterårsemester 2022 .card__section ul.tags li.tags__item 20 ECTS li.tags__item Kandidat li.tags__item Kandidatuddannelsen i statskundskab button(type="button" aria-pressed=state title="Gem kursus").card__button.icon-bookmark.aria-toggle Gem kursus .page__content__block.page__content__block--no-padding.page__content__block--vertical-padding.theme--background-cards h2 Flip the colors p If your page is filled with cards you can flip the colors, to have the cards stand out more. +horizontal-scroll().horizontal-scroll--snap.horizontal-scroll--no-scroll-wide ul.cards-container.cards-container--row +demo-cards(8, "Card label", true).horizontal-scroll__snap-item block sidebar +components-nav("cards")