datagrid.mdx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. ---
  2. title: Data grid
  3. description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
  4. ---
  5. ```html example code vcentered height="460px"
  6. <div class="datagrid">
  7. <div class="datagrid-item">
  8. <div class="datagrid-title">Registrar</div>
  9. <div class="datagrid-content">Third Party</div>
  10. </div>
  11. <div class="datagrid-item">
  12. <div class="datagrid-title">Nameservers</div>
  13. <div class="datagrid-content">Third Party</div>
  14. </div>
  15. <div class="datagrid-item">
  16. <div class="datagrid-title">Port number</div>
  17. <div class="datagrid-content">3306</div>
  18. </div>
  19. <div class="datagrid-item">
  20. <div class="datagrid-title">Expiration date</div>
  21. <div class="datagrid-content">–</div>
  22. </div>
  23. <div class="datagrid-item">
  24. <div class="datagrid-title">Creator</div>
  25. <div class="datagrid-content">
  26. <div class="d-flex align-items-center">
  27. <span class="avatar avatar-xs me-2 rounded" style="background-image: url(/samples/avatars/027m.jpg)"></span>
  28. Paweł Kuna
  29. </div>
  30. </div>
  31. </div>
  32. <div class="datagrid-item">
  33. <div class="datagrid-title">Age</div>
  34. <div class="datagrid-content">15 days</div>
  35. </div>
  36. <div class="datagrid-item">
  37. <div class="datagrid-title">Edge network</div>
  38. <div class="datagrid-content">
  39. <span class="status status-green">
  40. Active
  41. </span>
  42. </div>
  43. </div>
  44. <div class="datagrid-item">
  45. <div class="datagrid-title">Avatars list</div>
  46. <div class="datagrid-content">
  47. <div class="avatar-list avatar-list-stacked">
  48. <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/029f.jpg)"></span>
  49. <span class="avatar avatar-xs rounded">JL</span>
  50. <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/015f.jpg)"></span>
  51. <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/004m.jpg)"></span>
  52. <span class="avatar avatar-xs rounded" style="background-image: url(/samples/avatars/037m.jpg)"></span>
  53. <span class="avatar avatar-xs rounded">+3</span>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="datagrid-item">
  58. <div class="datagrid-title">Checkbox</div>
  59. <div class="datagrid-content">
  60. <label class="form-check">
  61. <input class="form-check-input" type="checkbox" checked />
  62. <span class="form-check-label">Click me</span>
  63. </label>
  64. </div>
  65. </div>
  66. <div class="datagrid-item">
  67. <div class="datagrid-title">Icon</div>
  68. <div class="datagrid-content">
  69. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  70. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  71. <path d="M5 12l5 5l10 -10" />
  72. </svg>
  73. Checked
  74. </div>
  75. </div>
  76. <div class="datagrid-item">
  77. <div class="datagrid-title">Form control</div>
  78. <div class="datagrid-content">
  79. <input type="text" class="form-control form-control-flush" placeholder="Input placeholder" />
  80. </div>
  81. </div>
  82. <div class="datagrid-item">
  83. <div class="datagrid-title">Longer description</div>
  84. <div class="datagrid-content">
  85. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  86. </div>
  87. </div>
  88. </div>
  89. ```