ribbons.mdx 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. ---
  2. title: Ribbons
  3. description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
  4. ---
  5. ## Default markup
  6. Use the `ribbon` class to add the default ribbon to any section of your interface.
  7. ```html example columns={1} centered
  8. <div class="card">
  9. <div class="card-body" style="height: 5rem">
  10. </div>
  11. <div class="ribbon">
  12. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  13. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  14. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
  15. </svg>
  16. </div>
  17. </div>
  18. ```
  19. ```html
  20. <div class="card">
  21. <div class="card-body">
  22. </div>
  23. <div class="ribbon">
  24. <!-- SVG icon from http://tabler-icons.io/i/star -->
  25. <svg>...</svg>
  26. </div>
  27. </div>
  28. ```
  29. ## Ribbon position
  30. You can change the position of a ribbon by adding one of the following classes to the element:
  31. - `ribbon-top` - moves it to the top
  32. - `ribbon-end` - moves it to the right
  33. - `ribbon-bottom` - moves it to the bottom
  34. - `ribbon-start` - moves it to the left
  35. Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
  36. ```html example columns={1} centered
  37. <div class="card">
  38. <div class="card-body" style="height: 5rem">
  39. </div>
  40. <div class="ribbon ribbon-top ribbon-start">
  41. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  42. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  43. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
  44. </svg>
  45. </div>
  46. </div>
  47. ```
  48. ```html
  49. <div class="card">
  50. <div class="card-body">
  51. </div>
  52. <div class="ribbon ribbon-top ribbon-start">
  53. <!-- SVG icon from http://tabler-icons.io/i/star -->
  54. <svg>...</svg>
  55. </div>
  56. </div>
  57. ```
  58. ## Ribbon color
  59. Customize the ribbon's background color. You can click [here](colors) to see the list of available colors.
  60. ```html example columns={1} centered
  61. <div class="card">
  62. <div class="card-body" style="height: 5rem">
  63. </div>
  64. <div class="ribbon bg-red">
  65. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  66. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  67. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
  68. </svg>
  69. </div>
  70. </div>
  71. ```
  72. ```html
  73. <div class="card">
  74. <div class="card-body">
  75. </div>
  76. <div class="ribbon bg-red">
  77. <!-- SVG icon from http://tabler-icons.io/i/star -->
  78. <svg>...</svg>
  79. </div>
  80. </div>
  81. ```
  82. ## Ribbon text
  83. Add your own text to a ribbon to display any additional information and make it easy to spot for users.
  84. ```html example columns={1} centered
  85. <div class="card">
  86. <div class="card-body" style="height: 5rem">
  87. </div>
  88. <div class="ribbon bg-green">
  89. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  90. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  91. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
  92. </svg>
  93. </div>
  94. </div>
  95. ```
  96. ```html
  97. <div class="card">
  98. <div class="card-body">
  99. </div>
  100. <div class="ribbon bg-green">
  101. <!-- SVG icon from http://tabler-icons.io/i/star -->
  102. <svg>...</svg>
  103. </div>
  104. </div>
  105. ```
  106. ## Ribbon style
  107. Change the style of a ribbon to make it go well with your interface design.
  108. ```html example columns={1} centered
  109. <div class="card w-100">
  110. <div class="card-body" style="height: 5rem">
  111. </div>
  112. <div class="ribbon ribbon-bookmark bg-orange">
  113. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  114. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  115. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
  116. </svg>
  117. </div>
  118. </div>
  119. ```
  120. ```html
  121. <div class="card">
  122. <div class="card-body">
  123. </div>
  124. <div class="ribbon ribbon-bookmark bg-orange">
  125. <!-- SVG icon from http://tabler-icons.io/i/star -->
  126. <svg>...</svg>
  127. </div>
  128. </div>
  129. ```