diff --git a/apps/for-everyone-website/public/assets/images/components/grid/usage-best-practise-ad.svg b/apps/for-everyone-website/public/assets/images/components/grid/usage-best-practise-ad.svg new file mode 100644 index 0000000000..f5ba9911e0 --- /dev/null +++ b/apps/for-everyone-website/public/assets/images/components/grid/usage-best-practise-ad.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/for-everyone-website/src/content/docs/guides/grid.mdx b/apps/for-everyone-website/src/content/docs/guides/grid.mdx index 0872716868..892ae5a5ad 100644 --- a/apps/for-everyone-website/src/content/docs/guides/grid.mdx +++ b/apps/for-everyone-website/src/content/docs/guides/grid.mdx @@ -127,6 +127,7 @@ Page content does not always need to span across 12 columns; it can occupy a sma To aid in implementing and visualising the Origami grid system in your projects, we offer a Chrome extension that provides a customisable grid overlay for your web pages. This helps you understand how your website aligns to Origami's grid system. Key features: + - Enable/disable grid overlay with a single click - Customize column, gutter, and margin colors - Adjust grid opacity @@ -142,9 +143,9 @@ Key features: larger or smaller to help group regions hierarchically on the page.

- - ![](/assets/images/components/grid/usage-best-practise.svg) - + + ![](/assets/images/components/grid/usage-best-practise.svg) + @@ -157,4 +158,9 @@ Key features: invisible element around the content which does align to the grid. Ensure no other content overlaps this grid area.

+ + + ![](/assets/images/components/grid/usage-best-practise-ad.svg) + + diff --git a/package-lock.json b/package-lock.json index 26e90ea462..2f4117e46d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2994,7 +2994,7 @@ }, "components/o-colors": { "name": "@financial-times/o-colors", - "version": "6.6.4", + "version": "6.7.0", "license": "MIT", "devDependencies": { "@financial-times/o-autoinit": "^3.1.0", @@ -3016,7 +3016,7 @@ }, "components/o-comments": { "name": "@financial-times/o-comments", - "version": "11.2.0", + "version": "11.2.1", "license": "MIT", "devDependencies": { "@financial-times/o-forms": "^9.9.0", @@ -3827,7 +3827,7 @@ }, "components/o-video": { "name": "@financial-times/o-video", - "version": "7.3.0", + "version": "7.3.1", "license": "MIT", "devDependencies": { "@financial-times/o-fonts": "^5.2.0",