@fremtind/jkl-description-list/description-list.css

The description list component is a container whose children is a key-value pair consisting of terms and details.

/**
 * Do not edit directly
 * Generated on Mon, 28 Oct 2024 14:24:14 GMT
 */
.jkl-description-list__term {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.jkl-description-list__term:not(:first-child) {
  margin-top: 0.75rem;
}
.jkl-description-list__detail {
  margin-left: 0;
}
.jkl-description-list__detail + .jkl-description-list__detail {
  margin-top: 0.25rem;
}
@media (min-width: 680px) {
  .jkl-description-list {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-columns: fit-content(40%) 1fr;
  }
  .jkl-description-list .jkl-description-list__term {
    grid-column-start: 1;
    margin: 0;
    overflow-wrap: break-word;
  }
  .jkl-description-list .jkl-description-list__term:not(:first-of-type) {
    margin-top: 0.5rem;
  }
  .jkl-description-list .jkl-description-list__detail {
    margin-left: 1.5rem;
    grid-column-start: 2;
  }
  .jkl-description-list .jkl-description-list__detail + .jkl-description-list__detail {
    margin-top: 0.5rem;
  }
  .jkl-description-list .jkl-description-list__term + .jkl-description-list__detail:not(:first-of-type) {
    margin-top: 0.5rem;
  }
}