Description List

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@gunkin/uiify";

export default function Example() {
  return (
    <DescriptionList className="">
      <DescriptionTerm className="">Status</DescriptionTerm>
      <DescriptionDetails className="">Active</DescriptionDetails>
      <DescriptionTerm className="">Project notes</DescriptionTerm>
      <DescriptionDetails className="">
        This value is intentionally long to show that detailed content wraps within the available space.
      </DescriptionDetails>
    </DescriptionList>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29

@layer components {
  [data-uiify-description-list] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: 0.75rem 1.5rem;
    margin: 0;
  }

  [data-uiify-description-term] {
    font-weight: var(--weight-medium);
  }

  [data-uiify-description-details] {
    min-inline-size: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  @media (width < 32rem) {
    [data-uiify-description-list] {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0.25rem;
    }

    [data-uiify-description-term]:not(:first-child) {
      margin-block-start: 0.75rem;
    }
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@gunkin/uiify";

export default function Example() {
  return (
    <DescriptionList
      className="
        grid w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))]
        grid-cols-[minmax(8rem,_max-content)_minmax(0,_1fr)] gap-y-3 gap-x-6 m-0 border border-border rounded-xl bg-card
        text-card-foreground p-6 shadow-popover max-[32rem]:grid-cols-1 max-[32rem]:gap-y-1
      "
    >
      <DescriptionTerm className="font-[number:var(--weight-medium)] max-[32rem]:not-first:mt-3">
        Status
      </DescriptionTerm>
      <DescriptionDetails className="min-w-0 m-0 [overflow-wrap:anywhere]">Active</DescriptionDetails>
      <DescriptionTerm className="font-[number:var(--weight-medium)] max-[32rem]:not-first:mt-3">
        Project notes
      </DescriptionTerm>
      <DescriptionDetails className="min-w-0 m-0 [overflow-wrap:anywhere]">
        This value is intentionally long to show that detailed content wraps within the available space.
      </DescriptionDetails>
    </DescriptionList>
  );
}