DPG Badges

[PelinSmines]

Currently each DPG has a DPG badge next to their title in the Registry. This is not needed as only the DPGs are listed anyway. We don't list the nominees or expired DPGs. So instead of the same DPG badge repeating for each DPG in the list, we need to put a "DPG type" badge for each DPG listed. This information is under "Solution Category" for each DPG. The categories are:

1. Open Software
2. Open Data
3. Open Standard (There's no standard DPGs atm.)
4. Open Content
5. Open AI Model

A DPG may have more than 1 category assigned to it. Then we can use more than 1 badge for it. In the category filter, next to the category title we can use the badge of that category which can function as a ledger for the badges as well. The badges are here: https://drive.google.com/drive/folders/1QitVA-oPSYMcPOYL8paC4s8tCT5zugno?usp=share_link

[gazdagergo]

Design proposal for the badges. Colors can vary based on company color guideline.

[PelinSmines]

@gazdagergo This solution is approved by Jameson and Ricardo. So we are going with the proposed badges in different colours. Please use the colours in this brand guide. In the badges please use the singular form: Software AI Model Standard Content Data We won't need the DPG badge in here anymore.

[PelinSmines]

Related to the issue: https://github.com/DPGAlliance/publicgoods-scripts/issues/250

[gazdagergo]

The new look with the guideline colors:

and the code:

<span><a href="https://app.digitalpublicgoods.net/a/10967" target="_blank" rel="noopener noreferrer">Aam Digital</a> 
<br>
        <svg style="height: 24px; margin-top: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 10">
  <polygon points="3,0 31,0 34,4 31,10 2,10 0,7 3,0" fill="rgb(124, 117, 242)"></polygon>
    <text font-family="Now Alt Regular" x="4" y="6.9" font-size="4.5px" fill="white">SOFTWARE</text>
</svg>
            <svg style="height: 24px; margin-top: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 10">
  <polygon points="3,0 30,0 33,4 30,10 2,10 0,7 3,0" fill="rgb(131, 190, 246)"></polygon>
    <text font-family="Now Alt Regular" x="4" y="6.9" font-size="4.5px" fill="rgb(44, 38, 154)">AI MODELS</text>
</svg>
    <br>
<svg style="height: 24px; margin-top: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 10">
  <polygon points="3,0 31,0 34,4 31,10 2,10 0,7 3,0" fill="rgb(255, 149, 42)"></polygon>
    <text font-family="Now Alt Regular" x="4" y="6.9" font-size="4.5px" fill="black">STANDARDS</text>
</svg>
        <br>
<svg style="height: 24px; margin-top: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 10">
  <polygon points="3,0 29,0 32,4 29,10 2,10 0,7 3,0" fill="rgb(33, 33, 128)"></polygon>
    <text font-family="Now Alt Regular" x="4" y="6.9" font-size="4.5px" fill="white">CONTENT</text>
</svg>

            <br>
<svg style="height: 24px; margin-top: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 10">
  <polygon points="3,0 19,0 22,4 19,10 2,10 0,7 3,0" fill="rgb(42, 168, 168)"></polygon>
    <text font-family="Now Alt Regular" x="5" y="6.9" font-size="4.5px" fill="white">DATA</text>
</svg>
</span>

[PelinSmines]

It looks very good. It was good to chose orange for standards, as that wouldn't be used very often. So the blue and green tones will look more cohesive on the website.