@coopdigital/foundations
Advanced tools
Comparing version
{ | ||
"name": "@coopdigital/foundations", | ||
"version": "1.2.0", | ||
"version": "1.2.1", | ||
"description": "Our foundations are the base CSS and variables that we build our products on", | ||
@@ -36,3 +36,3 @@ "main": "dist/foundations.css", | ||
}, | ||
"gitHead": "097ec591950a5103104588398a8a770e2d479b51" | ||
"gitHead": "28cb87a0948cd82beddc5f3f370a99c9be5a404f" | ||
} |
@@ -90,4 +90,22 @@ # Co-op Foundations | ||
### Using the icons accessibily | ||
You should always try to pair an icon with text if possible as suggested in the [Experience Library guidelines on icons](https://www.coop.co.uk/experience-library/foundations/icon-set.html) | ||
If the icon is paired with text it is classed as decorative and can be hidden from screenreaders. | ||
```html | ||
<svg> | ||
<p> | ||
<svg aria-hidden=“true”> | ||
<title>Basket</title> | ||
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use> | ||
</svg> | ||
Basket | ||
</p> | ||
``` | ||
If it is not possible to pair the icon with text then the aria-hidden attribute is not needed. | ||
```html | ||
<svg role="img"> | ||
<title>Basket</title> | ||
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use> | ||
@@ -97,2 +115,18 @@ </svg> | ||
### CSS | ||
There are some CSS classes to space and size the icons. The scooter being rectangular takes a modifier class to double the width. | ||
``` CSS | ||
.coop-i { | ||
fill: currentColor; | ||
margin: 20px; | ||
width: 32px; | ||
height: 32px; | ||
} | ||
.coop-i--scooter { | ||
width: 64px; | ||
} | ||
``` | ||
### Full list of icons by ID | ||
@@ -139,4 +173,6 @@ | ||
#icon-calendar | ||
#icon-scooter | ||
``` | ||
## Contributing | ||
@@ -143,0 +179,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
506770
0.47%640
0.16%180
25%