Jump to content

Get Involved/design/design-system: Difference between revisions

From KDE Community Wiki
Anditosan (talk | contribs)
KDEDevelopers, Administrators, trusted
138 edits
Created page with "{| style="width:100%; border-spacing: 10px;" <!-- This adds spacing between table cells --> |- | style="width:100%; padding: 10px; vertical-align:bottom;" | <div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;"> <hr> '''Name: gray-25'''<br /> '''Group: Primary'''<br /> '''HEX: #fbfcf'''<br /> '''CMYK: (1%,1%,0%,0%)'''<br /> '''RGB: (251,252,254)''' </div> | style="width:7.5%; padding: 10px; vertical-..."
 
Anditosan (talk | contribs)
KDEDevelopers, Administrators, trusted
138 edits
No edit summary
 
Line 1: Line 1:
{| style="width:100%; border-spacing: 10px;" <!-- This adds spacing between table cells -->
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|-
 
| style="width:100%; padding: 10px; vertical-align:bottom;" |
  <div style="flex: 1 1 calc(8.33% - 10px); min-width: 150px; height: 300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; padding: 10px; text-align:left;">
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
    <hr>
<hr>
    '''Name: gray-25'''<br />
'''Name: gray-25'''<br />
    '''Group: Primary'''<br />
'''Group: Primary'''<br />
    '''HEX: #fbfcf'''<br />
'''HEX: #fbfcf'''<br />
    '''CMYK: (1%,1%,0%,0%)'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
    '''RGB: (251,252,254)'''
'''RGB: (251,252,254)'''
  </div>
 
  <div style="flex: 1 1 calc(8.33% - 10px); min-width: 150px; height: 300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; padding: 10px; text-align:left;">
    <hr>
    '''Name: gray-25'''<br />
    '''Group: Primary'''<br />
    '''HEX: #fbfcf'''<br />
    '''CMYK: (1%,1%,0%,0%)'''<br />
    '''RGB: (251,252,254)'''
  </div>
 
  <!-- Repeat as many boxes as needed -->
 
</div>
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
| style="width:7.5%; padding: 10px; vertical-align:bottom;" |
<div style="width:100%; height:300px; background-color:#f9f9f9; border:1px solid #ccc; border-radius:20px; text-align:left;">
<hr>
'''Name: gray-25'''<br />
'''Group: Primary'''<br />
'''HEX: #fbfcf'''<br />
'''CMYK: (1%,1%,0%,0%)'''<br />
'''RGB: (251,252,254)'''
</div>
|}

Latest revision as of 16:57, 11 September 2024

   Name: gray-25

   Group: Primary

   HEX: #fbfcf

   CMYK: (1%,1%,0%,0%)

   RGB: (251,252,254)

   Name: gray-25

   Group: Primary

   HEX: #fbfcf

   CMYK: (1%,1%,0%,0%)

   RGB: (251,252,254)


Retrieved from "https://community.kde.org/index.php?title=Get_Involved/design/design-system&oldid=101565"