The IATI Dashboard uses inline badges (example) similar to Bootstrap badges to highlight features.
I think it would be helpful to consider whether this is something we want in the design system to allow us to highlight content across the IATI estate.
Acceptance criteria
Functional Criteria(Product features or functions that developers must implement to enable users to accomplish their tasks)
1.1 There should be a badge class (or classes) that can be added to span tags.
1.2 We should be able to control the background colour. I think there might be different ways we could implement this:
1.2.1 In common with other components we could have separate iati-badge--red, iati-badge--teal classes (which then have foreground text colours that match WAI contrast constraints).
1.2.2 In each application of the design system to a product/site we have custom CSS styling where we inherit from a base badge style and then set the colours to suit a particular application and are named in a way that matches the application.
1.2.3 In common with Bootstrap we could have foreground and background colour classes to apply within the markup.
Non-functional Criteria(Include availability, maintainability, performance, reliability, scalability, security, and usability criteria)
2.1. We could easily add this functionality by importing elements from Bootstrap.
The IATI Dashboard uses inline badges (example) similar to Bootstrap badges to highlight features.
I think it would be helpful to consider whether this is something we want in the design system to allow us to highlight content across the IATI estate.
Acceptance criteria
Functional Criteria (Product features or functions that developers must implement to enable users to accomplish their tasks) 1.1 There should be a badge class (or classes) that can be added to
spantags. 1.2 We should be able to control the background colour. I think there might be different ways we could implement this: 1.2.1 In common with other components we could have separateiati-badge--red,iati-badge--tealclasses (which then have foreground text colours that match WAI contrast constraints). 1.2.2 In each application of the design system to a product/site we have custom CSS styling where we inherit from a base badge style and then set the colours to suit a particular application and are named in a way that matches the application. 1.2.3 In common with Bootstrap we could have foreground and background colour classes to apply within the markup.Non-functional Criteria (Include availability, maintainability, performance, reliability, scalability, security, and usability criteria) 2.1. We could easily add this functionality by importing elements from Bootstrap.