-
Guidance
diff --git a/packages/web/src/components/gcds-grid/gcds-grid-col.css b/packages/web/src/components/gcds-grid/gcds-grid-col.css
new file mode 100644
index 000000000..bb4044dc0
--- /dev/null
+++ b/packages/web/src/components/gcds-grid/gcds-grid-col.css
@@ -0,0 +1,31 @@
+:host {
+ display: block;
+ grid-column: span var(--gcds-grid-columns-default-base) / span
+ var(--gcds-grid-columns-default-base);
+}
+
+:host .gcds-grid-col {
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+@media screen and (min-width: 48em) {
+ :host {
+ grid-column: span
+ var(--gcds-grid-col-tablet, var(--gcds-grid-columns-default-tablet)) /
+ span var(---gcds-grid-col-tablet, var(--gcds-grid-columns-default-tablet));
+ }
+}
+
+@media screen and (min-width: 64em) {
+ :host {
+ grid-column: span
+ var(--gcds-grid-col-desktop, var(--gcds-grid-columns-default-desktop)) /
+ span
+ var(--gcds-grid-col-desktop, var(--gcds-grid-columns-default-desktop));
+ }
+}
diff --git a/packages/web/src/components/gcds-grid/gcds-grid-col.tsx b/packages/web/src/components/gcds-grid/gcds-grid-col.tsx
new file mode 100644
index 000000000..cf71d3f7b
--- /dev/null
+++ b/packages/web/src/components/gcds-grid/gcds-grid-col.tsx
@@ -0,0 +1,98 @@
+import { Component, Element, Host, Watch, Prop, h } from '@stencil/core';
+
+@Component({
+ tag: 'gcds-grid-col',
+ styleUrl: 'gcds-grid-col.css',
+ shadow: true,
+})
+export class GcdsGridCol {
+ @Element() el: HTMLElement;
+
+ /**
+ * Props
+ */
+
+ /**
+ * Set tag for grid column
+ */
+ @Prop() tag?: string = 'div';
+
+ /**
+ * Optimize grid column size for tablet (768px - 1023px).
+ * Tablet grid column sizes are based on a 6 column grid.
+ * The tablet size will also be used for desktop, if desktop is undefined.
+ */
+ @Prop({ mutable: true }) tablet?: 1 | 2 | 3 | 4 | 5 | 6 = 6;
+
+ @Watch('tablet')
+ validateTablet(newValue: number) {
+ const values = [1, 2, 3, 4, 5, 6];
+
+ if (!values.includes(newValue)) {
+ this.tablet = 6;
+ }
+ }
+
+ /**
+ * Optimize grid column size for desktop (1024px and above).
+ * Desktop grid column sizes are based on a 12 column grid.
+ */
+ @Prop({ mutable: true }) desktop?:
+ | 1
+ | 2
+ | 3
+ | 4
+ | 5
+ | 6
+ | 7
+ | 8
+ | 9
+ | 10
+ | 11
+ | 12;
+
+ @Watch('desktop')
+ validateDesktop(newValue: number) {
+ const values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+ if (this.desktop && !values.includes(newValue)) {
+ this.desktop = 12;
+ }
+ }
+
+ componentWillLoad() {
+ // Validate attributes and set defaults
+ this.validateTablet(this.tablet);
+ this.validateDesktop(this.desktop);
+ }
+
+ render() {
+ const { desktop, tablet, tag } = this;
+
+ const Tag = tag;
+
+ function handleColSize() {
+ const colSize = {};
+
+ if (tablet) {
+ colSize['--gcds-grid-col-tablet'] = tablet;
+ }
+
+ if (desktop) {
+ colSize['--gcds-grid-col-desktop'] = desktop;
+ } else if (tablet) {
+ colSize['--gcds-grid-col-desktop'] = tablet * 2;
+ }
+
+ return colSize;
+ }
+
+ return (
+
+
+
+
+
+ );
+ }
+}
diff --git a/packages/web/src/components/gcds-grid/gcds-grid.css b/packages/web/src/components/gcds-grid/gcds-grid.css
index 1b65b0078..f2e720e54 100644
--- a/packages/web/src/components/gcds-grid/gcds-grid.css
+++ b/packages/web/src/components/gcds-grid/gcds-grid.css
@@ -2,8 +2,15 @@
margin: 0;
padding: 0;
grid-template-columns: var(--gcds-grid-columns, 1fr);
+ gap: var(--gcds-grid-gap);
+ box-sizing: border-box;
/* Display */
+ &.display-grid-with-cols {
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+
&.display-grid {
display: grid;
}
@@ -12,70 +19,6 @@
display: inline-grid;
}
- &.gap-0 {
- gap: var(--gcds-grid-gap-0);
- }
-
- &.gap-50 {
- gap: var(--gcds-grid-gap-50);
- }
-
- &.gap-100 {
- gap: var(--gcds-grid-gap-100);
- }
-
- &.gap-150 {
- gap: var(--gcds-grid-gap-150);
- }
-
- &.gap-200 {
- gap: var(--gcds-grid-gap-200);
- }
-
- &.gap-250 {
- gap: var(--gcds-grid-gap-250);
- }
-
- &.gap-300 {
- gap: var(--gcds-grid-gap-300);
- }
-
- &.gap-400 {
- gap: var(--gcds-grid-gap-400);
- }
-
- &.gap-450 {
- gap: var(--gcds-grid-gap-450);
- }
-
- &.gap-500 {
- gap: var(--gcds-grid-gap-500);
- }
-
- &.gap-550 {
- gap: var(--gcds-grid-gap-550);
- }
-
- &.gap-600 {
- gap: var(--gcds-grid-gap-600);
- }
-
- &.gap-700 {
- gap: var(--gcds-grid-gap-700);
- }
-
- &.gap-800 {
- gap: var(--gcds-grid-gap-800);
- }
-
- &.gap-900 {
- gap: var(--gcds-grid-gap-900);
- }
-
- &.gap-1000 {
- gap: var(--gcds-grid-gap-1000);
- }
-
/* Align content */
&.align-content-center {
align-content: center;
@@ -217,15 +160,44 @@
&.place-items-stretch {
place-items: stretch;
}
+
+ /* Equal row height */
+ &.equal-row-height {
+ grid-auto-rows: 1fr;
+ align-items: stretch;
+ }
}
@media screen and (min-width: 48em) {
:host .gcds-grid {
- grid-template-columns: var(--gcds-grid-columns-tablet, var(--gcds-grid-columns, 1fr));
+ grid-template-columns: var(
+ --gcds-grid-columns-tablet,
+ var(--gcds-grid-columns, 1fr)
+ );
+
+ /* Grid with cols */
+ &.display-grid-with-cols {
+ grid-template-columns: repeat(
+ var(--gcds-grid-columns-default-tablet),
+ minmax(0, 1fr)
+ );
+ }
}
}
+
@media screen and (min-width: 64em) {
:host .gcds-grid {
- grid-template-columns: var(--gcds-grid-columns-desktop, var(--gcds-grid-columns-tablet, var(--gcds-grid-columns, 1fr)));
+ grid-template-columns: var(
+ --gcds-grid-columns-desktop,
+ var(--gcds-grid-columns-tablet, var(--gcds-grid-columns, 1fr))
+ );
+
+ /* Grid with cols */
+ &.display-grid-with-cols {
+ grid-template-columns: repeat(
+ var(--gcds-grid-columns-default-desktop),
+ minmax(0, 1fr)
+ );
+ }
}
}
diff --git a/packages/web/src/components/gcds-grid/gcds-grid.tsx b/packages/web/src/components/gcds-grid/gcds-grid.tsx
index b95ea2dbe..e24a7e0af 100644
--- a/packages/web/src/components/gcds-grid/gcds-grid.tsx
+++ b/packages/web/src/components/gcds-grid/gcds-grid.tsx
@@ -1,5 +1,14 @@
import { Component, Element, Host, Prop, h } from '@stencil/core';
+type ContentValues =
+ | 'center'
+ | 'end'
+ | 'space-around'
+ | 'space-between'
+ | 'space-evenly'
+ | 'start'
+ | 'stretch';
+
@Component({
tag: 'gcds-grid',
styleUrl: 'gcds-grid.css',
@@ -16,7 +25,7 @@ export class GcdsGrid {
* Defines the columns of the grid
* Option to set different layouts for desktop | tablet | default (includes mobile)
*/
- @Prop() columns!: string;
+ @Prop() columns?: string;
@Prop() columnsTablet?: string;
@Prop() columnsDesktop?: string;
@@ -36,26 +45,10 @@ export class GcdsGrid {
@Prop() display?: 'grid' | 'inline-grid' = 'grid';
/**
- * Shorthand for column-gap + row-gap
- * Specifies the width of the gutters between columns and rows
+ * Sets all grid items to have an equal height,
+ * based on the tallest item.
*/
- @Prop() gap?:
- | '0'
- | '50'
- | '100'
- | '150'
- | '200'
- | '250'
- | '300'
- | '400'
- | '450'
- | '500'
- | '550'
- | '600'
- | '700'
- | '800'
- | '900'
- | '1000';
+ @Prop() equalRowHeight?: boolean = false;
/**
* Set tag for grid container
@@ -66,39 +59,18 @@ export class GcdsGrid {
* If total grid size is less than the size of its grid container,
* this property aligns the grid along the block (column) axis
*/
- @Prop() alignContent?:
- | 'center'
- | 'end'
- | 'space-around'
- | 'space-between'
- | 'space-evenly'
- | 'start'
- | 'stretch';
+ @Prop() alignContent?: ContentValues;
/**
* If total grid size is less than the size of its grid container,
* this property aligns the grid along the inline (row) axis
*/
- @Prop() justifyContent?:
- | 'center'
- | 'end'
- | 'space-around'
- | 'space-between'
- | 'space-evenly'
- | 'start'
- | 'stretch';
+ @Prop() justifyContent?: ContentValues;
/**
* Sets both the align-content + justify-content properties
*/
- @Prop() placeContent?:
- | 'center'
- | 'end'
- | 'space-around'
- | 'space-between'
- | 'space-evenly'
- | 'start'
- | 'stretch';
+ @Prop() placeContent?: ContentValues;
/**
* Aligns grid items along the block (column) axis
@@ -125,7 +97,7 @@ export class GcdsGrid {
container,
centered,
display,
- gap,
+ equalRowHeight,
justifyContent,
justifyItems,
placeContent,
@@ -138,8 +110,12 @@ export class GcdsGrid {
gcds-grid
${alignContent ? `align-content-${alignContent}` : ''}
${alignItems ? `align-items-${alignItems}` : ''}
- ${gap ? `gap-${gap}` : ''}
- ${display ? `display-${display}` : ''}
+ ${
+ (columns || columnsTablet || columnsDesktop) === undefined
+ ? `display-grid-with-cols`
+ : `display-${display}`
+ }
+ ${equalRowHeight ? 'equal-row-height' : ''}
${justifyContent ? `justify-content-${justifyContent}` : ''}
${justifyItems ? `justify-items-${justifyItems}` : ''}
${placeContent ? `place-content-${placeContent}` : ''}
@@ -150,14 +126,16 @@ export class GcdsGrid {
function handleColumns() {
const responsiveColumns = {};
- if (columnsDesktop) {
- responsiveColumns['--gcds-grid-columns-desktop'] = columnsDesktop;
+ if (columns) {
+ responsiveColumns['--gcds-grid-columns'] = columns;
}
+
if (columnsTablet) {
responsiveColumns['--gcds-grid-columns-tablet'] = columnsTablet;
}
- if (columns) {
- responsiveColumns['--gcds-grid-columns'] = columns;
+
+ if (columnsDesktop) {
+ responsiveColumns['--gcds-grid-columns-desktop'] = columnsDesktop;
}
return responsiveColumns;
diff --git a/packages/web/src/components/gcds-grid/readme.md b/packages/web/src/components/gcds-grid/readme.md
index ce4cf87b3..96b6205d3 100644
--- a/packages/web/src/components/gcds-grid/readme.md
+++ b/packages/web/src/components/gcds-grid/readme.md
@@ -7,41 +7,12 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `alignContent` | `align-content` | If total grid size is less than the size of its grid container, this property aligns the grid along the block (column) axis | `"center" \| "end" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `undefined` |
-| `alignItems` | `align-items` | Aligns grid items along the block (column) axis | `"baseline" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
-| `centered` | `centered` | Defines if grid container is centered or not | `boolean` | `false` |
-| `columns` _(required)_ | `columns` | Defines the columns of the grid Option to set different layouts for desktop \| tablet \| default (includes mobile) | `string` | `undefined` |
-| `columnsDesktop` | `columns-desktop` | | `string` | `undefined` |
-| `columnsTablet` | `columns-tablet` | | `string` | `undefined` |
-| `container` | `container` | Defines grid container size | `"full" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` | `undefined` |
-| `display` | `display` | Defines element as grid or inline-grid container | `"grid" \| "inline-grid"` | `'grid'` |
-| `gap` | `gap` | Shorthand for column-gap + row-gap Specifies the width of the gutters between columns and rows | `"0" \| "100" \| "1000" \| "150" \| "200" \| "250" \| "300" \| "400" \| "450" \| "50" \| "500" \| "550" \| "600" \| "700" \| "800" \| "900"` | `undefined` |
-| `justifyContent` | `justify-content` | If total grid size is less than the size of its grid container, this property aligns the grid along the inline (row) axis | `"center" \| "end" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `undefined` |
-| `justifyItems` | `justify-items` | Aligns grid items along the inline (row) axis | `"center" \| "end" \| "start" \| "stretch"` | `undefined` |
-| `placeContent` | `place-content` | Sets both the align-content + justify-content properties | `"center" \| "end" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `undefined` |
-| `placeItems` | `place-items` | Sets both the align-items + justify-items properties | `"center" \| "end" \| "start" \| "stretch"` | `undefined` |
-| `tag` | `tag` | Set tag for grid container | `string` | `'div'` |
-
-
-## Dependencies
-
-### Used by
-
- - [gcds-verify-banner](../gcds-verify-banner)
-
-### Depends on
-
-- [gcds-container](../gcds-container)
-
-### Graph
-```mermaid
-graph TD;
- gcds-grid --> gcds-container
- gcds-verify-banner --> gcds-grid
- style gcds-grid fill:#f9f,stroke:#333,stroke-width:4px
-```
+| Property | Attribute | Description | Type | Default |
+| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ----------- |
+| `desktop` | `desktop` | Optimize grid column size for desktop (1024px and above). Desktop grid column sizes are based on a 12 column grid. | `1 \| 10 \| 11 \| 12 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9` | `undefined` |
+| `tablet` | `tablet` | Optimize grid column size for tablet (768px - 1023px). Tablet grid column sizes are based on a 6 column grid. The tablet size will also be used for desktop, if desktop is undefined. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `6` |
+| `tag` | `tag` | Set tag for grid column | `string` | `'div'` |
+
----------------------------------------------
diff --git a/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx b/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx
index 808c2175a..e3d61c3d5 100644
--- a/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx
+++ b/packages/web/src/components/gcds-grid/stories/gcds-grid.stories.tsx
@@ -9,9 +9,6 @@ export default {
type: { summary: 'string' },
defaultValue: { summary: '-' },
},
- type: {
- required: true,
- },
},
columnsTablet: {
name: 'columns-tablet',
@@ -45,29 +42,13 @@ export default {
defaultValue: { summary: 'grid' },
},
},
- gap: {
+ equalRowHeight: {
+ name: 'equal-row-height',
control: { type: 'select' },
- options: [
- '0',
- '50',
- '100',
- '150',
- '200',
- '250',
- '300',
- '400',
- '450',
- '500',
- '550',
- '600',
- '700',
- '800',
- '900',
- '1000',
- ],
+ options: [false, true],
table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
+ type: { summary: 'boolean' },
+ defaultValue: { summary: false },
},
},
tag: {
@@ -177,15 +158,13 @@ const Template = args =>
args.columnsDesktop ? `columns-desktop="${args.columnsDesktop}"` : null
} ${args.columnsTablet ? `columns-tablet="${args.columnsTablet}"` : null} ${
args.columns ? `columns="${args.columns}"` : null
- } ${args.gap ? `gap="${args.gap}"` : null} ${
- args.alignContent ? `align-content="${args.alignContent}"` : null
- } ${
+ } ${args.alignContent ? `align-content="${args.alignContent}"` : null} ${
args.justifyContent ? `justify-content="${args.justifyContent}"` : null
} ${args.placeContent ? `place-content="${args.placeContent}"` : null} ${
args.alignItems ? `align-items="${args.alignItems}"` : null
} ${args.justifyItems ? `justify-items="${args.justifyItems}"` : null} ${
args.placeItems ? `place-items="${args.placeItems}"` : null
- }>
+ } ${args.equalRowHeight ? `equal-row-height` : null}>
${args.default ? args.default : null}
@@ -195,18 +174,41 @@ const Template = args =>
} ${args.columnsDesktop ? `columnsDesktop="${args.columnsDesktop}"` : null} ${
args.columnsTablet ? `columnsTablet="${args.columnsTablet}"` : null
} ${args.columns ? `columns="${args.columns}"` : null} ${
- args.gap ? `gap="${args.gap}"` : null
- } ${args.alignContent ? `alignContent="${args.alignContent}"` : null} ${
- args.justifyContent ? `justifyContent="${args.justifyContent}"` : null
- } ${args.placeContent ? `placeContent="${args.placeContent}"` : null} ${
- args.alignItems ? `alignItems="${args.alignItems}"` : null
- } ${args.justifyItems ? `justifyItems="${args.justifyItems}"` : null} ${
- args.placeItems ? `placeItems="${args.placeItems}"` : null
+ args.alignContent ? `alignContent="${args.alignContent}"` : null
+ } ${args.justifyContent ? `justifyContent="${args.justifyContent}"` : null} ${
+ args.placeContent ? `placeContent="${args.placeContent}"` : null
+ } ${args.alignItems ? `alignItems="${args.alignItems}"` : null} ${
+ args.justifyItems ? `justifyItems="${args.justifyItems}"` : null
+ } ${args.placeItems ? `placeItems="${args.placeItems}"` : null} ${
+ args.equalRowHeight ? `equalRowHeight` : null
}>
${args.default ? args.default : null}
`.replace(/ null/g, '');
+const TemplateIndividual = args =>
+ `
+
+
+ ${
+ args.default ? args.default : null
+ }
+ ${
+ args.default ? args.default : null
+ }
+
+
+
+
+ ${
+ args.default ? args.default : null
+ }
+ ${
+ args.default ? args.default : null
+ }
+
+`.replace(/ null/g, '');
+
const TemplatePlayground = args => `
`
${args.columnsDesktop ? `columns-desktop="${args.columnsDesktop}"` : null}
${args.columnsTablet ? `columns-tablet="${args.columnsTablet}"` : null}
${args.columns ? `columns="${args.columns}"` : null}
- ${args.gap ? `gap="${args.gap}"` : null}
${args.alignContent ? `align-content="${args.alignContent}"` : null}
${args.justifyContent ? `justify-content="${args.justifyContent}"` : null}
${args.placeContent ? `place-content="${args.placeContent}"` : null}
${args.alignItems ? `align-items="${args.alignItems}"` : null}
${args.justifyItems ? `justify-items="${args.justifyItems}"` : null}
${args.placeItems ? `place-items="${args.placeItems}"` : null}
+ ${args.equalRowHeight ? `equal-row-height` : null}
>
${args.default ? args.default : null}
@@ -234,7 +236,6 @@ Default.args = {
columnsTablet: '1fr 1fr',
columns: '1fr',
container: 'full',
- gap: '400',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
@@ -248,7 +249,6 @@ export const Columns = Template.bind({});
Columns.args = {
columns: '1fr',
container: 'full',
- gap: '200',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
@@ -261,7 +261,6 @@ ColumnsTablet.args = {
columns: '1fr',
columnsTablet: '1fr 1fr',
container: 'full',
- gap: '200',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
@@ -275,7 +274,6 @@ ColumnsDesktop.args = {
columnsTablet: '1fr 1fr',
columns: '1fr',
container: 'full',
- gap: '200',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
@@ -283,32 +281,48 @@ ColumnsDesktop.args = {
This is some example content to display the grid component.
`,
};
-// ------ Grid equal width column ------
+// ------ Grid types ------
-export const EqualFlexbile = Template.bind({});
-EqualFlexbile.args = {
- columnsDesktop: '1fr 1fr 1fr',
+export const Fluid = Template.bind({});
+Fluid.args = {
+ columnsDesktop: '1fr 1fr 1fr 1fr',
columnsTablet: '1fr 1fr',
columns: '1fr',
container: 'full',
- gap: '400',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
+ This is some example content to display the grid component.
This is some example content to display the grid component.
`,
};
-export const EqualWidth = Template.bind({});
-EqualWidth.args = {
+export const Fixed = Template.bind({});
+Fixed.args = {
columns: 'repeat(auto-fit, minmax(100px, 250px))',
container: 'full',
- gap: '400',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
This is some example content to display the grid component.
`,
};
+export const Hybrid = Template.bind({});
+Hybrid.args = {
+ columns: 'repeat(auto-fit, minmax(400px, 1fr))',
+ container: 'full',
+ tag: 'div',
+ default: `This is some example content to display the grid component.
+ This is some example content to display the grid component.
+ This is some example content to display the grid component.
`,
+};
+
+export const Individual = TemplateIndividual.bind({});
+Individual.args = {
+ container: 'full',
+ tag: 'div',
+ default: 'This is some example content to display the grid component.',
+};
+
// ------ Grid events & props ------
export const Props = Template.bind({});
@@ -317,7 +331,6 @@ Props.args = {
columnsDesktop: '',
columnsTablet: '',
container: 'full',
- gap: '400',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
@@ -331,7 +344,6 @@ export const Playground = TemplatePlayground.bind({});
Playground.args = {
container: 'full',
columns: 'repeat(auto-fit, minmax(250px, 1fr))',
- gap: '400',
tag: 'div',
default: `This is some example content to display the grid component.
This is some example content to display the grid component.
diff --git a/packages/web/src/components/gcds-grid/stories/overview.mdx b/packages/web/src/components/gcds-grid/stories/overview.mdx
index a07974852..58847cd36 100644
--- a/packages/web/src/components/gcds-grid/stories/overview.mdx
+++ b/packages/web/src/components/gcds-grid/stories/overview.mdx
@@ -15,6 +15,32 @@ A grid is a responsive, flexible column layout to position elements on a page.
+### Simple grids
+
+#### Fluid grid
+
+Each grid column takes up a fractional amount of space within the grid and has no fixed width restrictions. The grid and its columns scale to the size of the viewport. This example has 4 columns for large viewports, 2 columns for medium viewports, and 1 column for smaller viewports.
+
+
+
+#### Fixed width grid
+
+In fixed width grids each grid column has a fixed minimum and a maximum width to limit how wide they will span on any screen size. The columns scale until they either reach their minimum or their maximum width. Once a grid column reaches its minimum width, it gets moved to the next row if the space on the current row becomes smaller than its minimum width. In this example each grid column has a minimum width of 100px and a maximum width of 300px.
+
+
+
+### Hybrid grid
+
+Hybrid grid columns include either a minimum or a maximum width and one fractional width. In this example each grid column is responsive with a minimum width of 400px and no maximum width which means it takes up the available space.
+
+
+
+### Individually sized grid
+
+When using individually sized grid columns, the grid columns define their own size. Each grid column can define a base, tablet (optional) and desktop (optional) size.
+
+
+
### Grid columns
#### Columns
@@ -35,24 +61,10 @@ Use the `columns-desktop` property to define your layout for larger screens **(6
-### Equal width column
-
-#### Without width restrictions
-
-Opt out of setting the minimum and maximum width when you want to design equal-width columns without width restrictions. This will allow the grid and its columns to scale to the size of the viewport.
-
-
-
-#### Setting a minimum und maximum width
-
-Set the minimum and maximum width to design equal-width columns with restrictions to limit how wide they will span on any screen size.
-
-
-
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts b/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts
index 54580f1de..3ef3f047b 100644
--- a/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts
+++ b/packages/web/src/components/gcds-grid/test/gcds-grid.spec.ts
@@ -6,13 +6,13 @@ describe('gcds-grid', () => {
const { root } = await newSpecPage({
components: [GcdsGrid],
html: `
-
+
`,
});
expect(root).toEqualHtml(`
-
+
-
@@ -24,13 +24,13 @@ describe('gcds-grid', () => {
const { root } = await newSpecPage({
components: [GcdsGrid],
html: `
-
+
`,
});
expect(root).toEqualHtml(`
-
+
-
@@ -42,13 +42,13 @@ describe('gcds-grid', () => {
const { root } = await newSpecPage({
components: [GcdsGrid],
html: `
-
+
`,
});
expect(root).toEqualHtml(`
-
+
-
diff --git a/packages/web/src/components/gcds-header/stories/overview.mdx b/packages/web/src/components/gcds-header/stories/overview.mdx
index ea3ded1d8..ca3e4e6ae 100644
--- a/packages/web/src/components/gcds-header/stories/overview.mdx
+++ b/packages/web/src/components/gcds-header/stories/overview.mdx
@@ -48,7 +48,7 @@ The header is the responsive Government of Canada branded header landmark.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-heading/stories/overview.mdx b/packages/web/src/components/gcds-heading/stories/overview.mdx
index b608e9a67..d4a5b61b0 100644
--- a/packages/web/src/components/gcds-heading/stories/overview.mdx
+++ b/packages/web/src/components/gcds-heading/stories/overview.mdx
@@ -44,7 +44,7 @@ A title that structures content by creating levels of hierarchy that organize pa
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-icon/stories/overview.mdx b/packages/web/src/components/gcds-icon/stories/overview.mdx
index 3c14e4e45..45ca6129c 100644
--- a/packages/web/src/components/gcds-icon/stories/overview.mdx
+++ b/packages/web/src/components/gcds-icon/stories/overview.mdx
@@ -48,7 +48,7 @@ If you are using an icon by itself, use the `label` to ensure that it has the pr
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-input/stories/overview.mdx b/packages/web/src/components/gcds-input/stories/overview.mdx
index 9fc6ebb06..7797992db 100644
--- a/packages/web/src/components/gcds-input/stories/overview.mdx
+++ b/packages/web/src/components/gcds-input/stories/overview.mdx
@@ -62,7 +62,7 @@ An input is a space to enter short-form information in response to a question or
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx b/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx
index 36e888e3e..bafde0208 100644
--- a/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx
+++ b/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx
@@ -28,7 +28,7 @@ The language toggle is a link to the same content in the other Official Language
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-link/gcds-link.css b/packages/web/src/components/gcds-link/gcds-link.css
index 53928d3a1..e83cbc65e 100644
--- a/packages/web/src/components/gcds-link/gcds-link.css
+++ b/packages/web/src/components/gcds-link/gcds-link.css
@@ -16,7 +16,8 @@
background-color: var(--gcds-link-focus-background);
color: var(--gcds-link-focus-text);
box-shadow: var(--gcds-link-focus-box-shadow);
- outline: var(--gcds-link-focus-outline-width) solid var(--gcds-link-focus-background);
+ outline: var(--gcds-link-focus-outline-width) solid
+ var(--gcds-link-focus-background);
outline-offset: var(--gcds-link-focus-outline-offset);
border-color: var(--gcds-link-focus-background);
text-decoration: none;
@@ -34,6 +35,10 @@
font: inherit;
}
+ &.variant-light {
+ color: var(--gcds-link-light);
+ }
+
&.d-block {
display: block;
}
diff --git a/packages/web/src/components/gcds-link/gcds-link.tsx b/packages/web/src/components/gcds-link/gcds-link.tsx
index c8ee59b76..964ad4468 100644
--- a/packages/web/src/components/gcds-link/gcds-link.tsx
+++ b/packages/web/src/components/gcds-link/gcds-link.tsx
@@ -27,6 +27,20 @@ export class GcdsLink {
* Props
*/
+ /**
+ * Sets the main style of the link.
+ */
+ @Prop({ mutable: true }) variant?: 'default' | 'light' = 'default';
+
+ @Watch('variant')
+ validateVariant(newValue: string) {
+ const values = ['default', 'light'];
+
+ if (!values.includes(newValue)) {
+ this.variant = 'default';
+ }
+ }
+
/**
* Set the link size
*/
@@ -43,7 +57,7 @@ export class GcdsLink {
/**
* Sets the display behavior of the link
*/
- @Prop() display?: 'block' | 'inline' = 'inline';
+ @Prop({ mutable: true }) display?: 'block' | 'inline' = 'inline';
@Watch('display')
validateDisplay(newValue: string) {
const values = ['block', 'inline'];
@@ -125,6 +139,7 @@ export class GcdsLink {
componentWillLoad() {
// Validate attributes and set defaults
+ this.validateVariant(this.variant);
this.validateSize(this.size);
this.validateDisplay(this.display);
@@ -150,6 +165,7 @@ export class GcdsLink {
download,
type,
inheritedAttributes,
+ variant,
} = this;
const attrs = {
@@ -169,7 +185,9 @@ export class GcdsLink {
role="link"
tabIndex={0}
{...attrs}
- class={`link--${size} ${display != 'inline' ? `d-${display}` : ''}`}
+ class={`link--${size} ${display != 'inline' ? `d-${display}` : ''} ${
+ variant != 'default' ? `variant-${variant}` : ''
+ }`}
ref={element => (this.shadowElement = element as HTMLElement)}
target={isExternal ? '_blank' : target}
rel={isExternal ? 'noopener noreferrer' : rel}
diff --git a/packages/web/src/components/gcds-link/readme.md b/packages/web/src/components/gcds-link/readme.md
index 8df7212fe..d65f035cf 100644
--- a/packages/web/src/components/gcds-link/readme.md
+++ b/packages/web/src/components/gcds-link/readme.md
@@ -17,6 +17,7 @@
| `size` | `size` | Set the link size | `"inherit" \| "regular" \| "small"` | `'inherit'` |
| `target` | `target` | The target attribute specifies where to open the linked document | `string` | `'_self'` |
| `type` | `type` | The type specifies the media type of the linked document | `string` | `undefined` |
+| `variant` | `variant` | Sets the main style of the link. | `"default" \| "light"` | `'default'` |
## Events
diff --git a/packages/web/src/components/gcds-link/stories/gcds-link.stories.js b/packages/web/src/components/gcds-link/stories/gcds-link.stories.js
index bbfd0f2fe..f1f53baf0 100644
--- a/packages/web/src/components/gcds-link/stories/gcds-link.stories.js
+++ b/packages/web/src/components/gcds-link/stories/gcds-link.stories.js
@@ -33,6 +33,14 @@ export default {
defaultValue: { summary: '-' },
},
},
+ variant: {
+ control: { type: 'select' },
+ options: ['default', 'light'],
+ table: {
+ type: { summary: 'string' },
+ defaultValue: { summary: 'default' },
+ },
+ },
rel: {
control: 'text',
table: {
@@ -88,24 +96,24 @@ This is an example of
${args.default}
+ } ${args.variant != 'default' ? `variant="${args.variant}"` : null} ${
+ args.rel ? `rel="${args.rel}"` : null
+ } ${args.target != '_self' ? `target="${args.target}"` : null} ${
+ args.size != 'inherit' && args.size ? `size="${args.size}"` : null
+ } ${args.external ? `external` : null} ${
+ args.download ? `download="${args.download}"` : null
+ } ${args.type ? `type="${args.type}"` : null}>${args.default}
${args.default}
+ } ${args.variant != 'default' ? `variant="${args.variant}"` : null} ${
+ args.rel ? `rel="${args.rel}"` : null
+ } ${args.target != '_self' ? `target="${args.target}"` : null} ${
+ args.size != 'inherit' && args.size ? `size="${args.size}"` : null
+ } ${args.external ? `external` : null} ${
+ args.download ? `download="${args.download}"` : null
+ } ${args.type ? `type="${args.type}"` : null}>${args.default}
link.
`.replace(/ null/g, '');
@@ -113,28 +121,44 @@ const TemplateSizeInherit = args =>
`
This is an example of ${args.default} link
+
This is an example of ${args.default} link
`;
+const TemplateVariant = args =>
+ `
+
+${args.default}
+
+
+${args.default}
+`.replace(/ null/g, '');
+
const TemplatePlayground = args => `
${args.default}
+} ${args.variant != 'default' ? `variant="${args.variant}"` : null} ${
+ args.rel ? `rel="${args.rel}"` : null
+} ${args.target && args.target != '_self' ? `target="${args.target}"` : null} ${
+ args.size != 'inherit' && args.size ? `size="${args.size}"` : null
+} ${args.external ? `external` : null} ${
+ args.download ? `download="${args.download}"` : null
+} ${args.type ? `type="${args.type}"` : null}> ${args.default}
`;
// ------ Link Default ------
+
export const Default = Template.bind({});
Default.args = {
display: 'inline',
href: '#',
+ variant: 'default',
rel: '',
target: '_self',
size: 'inherit',
@@ -145,10 +169,12 @@ Default.args = {
};
// ------ Link events & props ------
+
export const Props = Template.bind({});
Props.args = {
display: 'inline',
href: '#',
+ variant: 'default',
rel: '',
target: '_self',
size: 'inherit',
@@ -158,10 +184,13 @@ Props.args = {
default: 'a GCDS Link component',
};
+// ------ Link with icon ------
+
export const External = Template.bind({});
External.args = {
display: 'inline',
href: 'http://design-system.alpha.canada.ca',
+ variant: 'default',
rel: '',
target: '_blank',
size: 'inherit',
@@ -175,6 +204,7 @@ export const Download = Template.bind({});
Download.args = {
href: 'long-filename.pdf',
display: 'inline',
+ variant: 'default',
target: '_self',
size: 'inherit',
download: 'file.pdf',
@@ -185,6 +215,7 @@ Download.args = {
export const Email = Template.bind({});
Email.args = {
display: 'inline',
+ variant: 'default',
target: '_self',
size: 'inherit',
href: 'mailto:test@test.com?subject=Test%20Email',
@@ -194,16 +225,20 @@ Email.args = {
export const Phone = Template.bind({});
Phone.args = {
display: 'inline',
+ variant: 'default',
target: '_self',
size: 'inherit',
href: 'tel:1234567890',
default: 'a phone number',
};
+// ------ Link sizes ------
+
export const SizesSmall = Template.bind({});
SizesSmall.args = {
display: 'inline',
href: '#',
+ variant: 'default',
rel: '',
target: '_self',
size: 'small',
@@ -217,6 +252,7 @@ export const SizesRegular = Template.bind({});
SizesRegular.args = {
display: 'inline',
href: '#',
+ variant: 'default',
rel: '',
target: '_self',
size: 'regular',
@@ -230,6 +266,7 @@ export const SizesInherit = TemplateSizeInherit.bind({});
SizesInherit.args = {
display: 'inline',
href: '#',
+ variant: 'default',
rel: '',
target: '_self',
size: 'inherit',
@@ -239,12 +276,27 @@ SizesInherit.args = {
default: 'a size inherit',
};
+// ------ Link roles ------
+
+export const VariantDefault = TemplateVariant.bind({});
+VariantDefault.args = {
+ default: 'This is a link using the default link variant.',
+ variant: 'default',
+};
+
+export const VariantLight = TemplateVariant.bind({});
+VariantLight.args = {
+ default: 'This is a link using the light link variant.',
+ variant: 'light',
+};
+
// ------ Link playground ------
export const Playground = TemplatePlayground.bind({});
Playground.args = {
display: 'inline',
href: '#',
+ variant: 'default',
rel: '',
target: '_self',
size: 'inherit',
diff --git a/packages/web/src/components/gcds-link/stories/overview.mdx b/packages/web/src/components/gcds-link/stories/overview.mdx
index 0fd05b4d5..a3f36b615 100644
--- a/packages/web/src/components/gcds-link/stories/overview.mdx
+++ b/packages/web/src/components/gcds-link/stories/overview.mdx
@@ -45,10 +45,20 @@ A navigational element that allows users to navigate to a new page, website or s
+### Variants
+
+#### Default
+
+
+
+#### Light
+
+
+
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts
index cb5ea864e..792ac5a7c 100644
--- a/packages/web/src/components/gcds-link/test/gcds-link.spec.ts
+++ b/packages/web/src/components/gcds-link/test/gcds-link.spec.ts
@@ -254,4 +254,21 @@ describe('gcds-link', () => {
`);
});
+
+ it('renders a light link variant', async () => {
+ const { root } = await newSpecPage({
+ components: [GcdsLink],
+ html: 'Link text',
+ });
+ expect(root).toEqualHtml(`
+
+
+
+
+
+
+ Link text
+
+ `);
+ });
});
diff --git a/packages/web/src/components/gcds-nav-group/stories/overview.mdx b/packages/web/src/components/gcds-nav-group/stories/overview.mdx
index d24778cb2..eaaaee436 100644
--- a/packages/web/src/components/gcds-nav-group/stories/overview.mdx
+++ b/packages/web/src/components/gcds-nav-group/stories/overview.mdx
@@ -38,7 +38,7 @@ import * as NavGroup from './gcds-nav-group.stories';
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-nav-link/stories/overview.mdx b/packages/web/src/components/gcds-nav-link/stories/overview.mdx
index ebbe852f5..e8e697dd4 100644
--- a/packages/web/src/components/gcds-nav-link/stories/overview.mdx
+++ b/packages/web/src/components/gcds-nav-link/stories/overview.mdx
@@ -34,7 +34,7 @@ import * as NavLink from './gcds-nav-link.stories';
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-pagination/stories/overview.mdx b/packages/web/src/components/gcds-pagination/stories/overview.mdx
index f351cdbb7..c517601ea 100644
--- a/packages/web/src/components/gcds-pagination/stories/overview.mdx
+++ b/packages/web/src/components/gcds-pagination/stories/overview.mdx
@@ -50,7 +50,7 @@ Pagination is a division of content into multiple linked pages.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-radio/stories/overview.mdx b/packages/web/src/components/gcds-radio/stories/overview.mdx
index 9f50ac3d1..7f75436ea 100644
--- a/packages/web/src/components/gcds-radio/stories/overview.mdx
+++ b/packages/web/src/components/gcds-radio/stories/overview.mdx
@@ -36,7 +36,7 @@ A radio is a set of options for a single selection.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-search/stories/overview.mdx b/packages/web/src/components/gcds-search/stories/overview.mdx
index 9d7bc625d..b87a52420 100644
--- a/packages/web/src/components/gcds-search/stories/overview.mdx
+++ b/packages/web/src/components/gcds-search/stories/overview.mdx
@@ -32,7 +32,7 @@ Search is a way to enter keywords to find relevant information.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-select/stories/overview.mdx b/packages/web/src/components/gcds-select/stories/overview.mdx
index 3f503b919..cbec992b5 100644
--- a/packages/web/src/components/gcds-select/stories/overview.mdx
+++ b/packages/web/src/components/gcds-select/stories/overview.mdx
@@ -46,7 +46,7 @@ A list of options with a single-option choice.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-side-nav/stories/overview.mdx b/packages/web/src/components/gcds-side-nav/stories/overview.mdx
index df77d1fad..54072677c 100644
--- a/packages/web/src/components/gcds-side-nav/stories/overview.mdx
+++ b/packages/web/src/components/gcds-side-nav/stories/overview.mdx
@@ -22,7 +22,7 @@ A side navigation is a vertical list of page links on the left side of the scree
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-signature/stories/overview.mdx b/packages/web/src/components/gcds-signature/stories/overview.mdx
index 4881bbef6..9879b9791 100644
--- a/packages/web/src/components/gcds-signature/stories/overview.mdx
+++ b/packages/web/src/components/gcds-signature/stories/overview.mdx
@@ -73,7 +73,7 @@ The signature is the Government of Canada landmark identifier found in the heade
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-sr-only/stories/overview.mdx b/packages/web/src/components/gcds-sr-only/stories/overview.mdx
index 530bad4a6..5d8968c96 100644
--- a/packages/web/src/components/gcds-sr-only/stories/overview.mdx
+++ b/packages/web/src/components/gcds-sr-only/stories/overview.mdx
@@ -12,7 +12,7 @@ _Also called: visually hidden, assistive text._
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-stepper/stories/overview.mdx b/packages/web/src/components/gcds-stepper/stories/overview.mdx
index d06ca5856..2f977ff89 100644
--- a/packages/web/src/components/gcds-stepper/stories/overview.mdx
+++ b/packages/web/src/components/gcds-stepper/stories/overview.mdx
@@ -28,7 +28,7 @@ A stepper is a progress tracker for a multi-step process.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-text/stories/overview.mdx b/packages/web/src/components/gcds-text/stories/overview.mdx
index 424d276e8..094b398a0 100644
--- a/packages/web/src/components/gcds-text/stories/overview.mdx
+++ b/packages/web/src/components/gcds-text/stories/overview.mdx
@@ -52,7 +52,7 @@ Text is a paragraph displaying non-heading content with matching GC Design Syste
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-textarea/stories/overview.mdx b/packages/web/src/components/gcds-textarea/stories/overview.mdx
index 24f1d8962..1df4e511e 100644
--- a/packages/web/src/components/gcds-textarea/stories/overview.mdx
+++ b/packages/web/src/components/gcds-textarea/stories/overview.mdx
@@ -44,7 +44,7 @@ A text area is a space to enter long-form information in response to a question
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-top-nav/stories/overview.mdx b/packages/web/src/components/gcds-top-nav/stories/overview.mdx
index 15cf7af52..15c8c8adc 100644
--- a/packages/web/src/components/gcds-top-nav/stories/overview.mdx
+++ b/packages/web/src/components/gcds-top-nav/stories/overview.mdx
@@ -38,7 +38,7 @@ A top navigation is a horizontal list of page links.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-topic-menu/stories/overview.mdx b/packages/web/src/components/gcds-topic-menu/stories/overview.mdx
index 084d5b93a..f03fd7fbb 100644
--- a/packages/web/src/components/gcds-topic-menu/stories/overview.mdx
+++ b/packages/web/src/components/gcds-topic-menu/stories/overview.mdx
@@ -30,7 +30,7 @@ Navigate to the top tasks from all Government of Canada websites.
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/components/gcds-verify-banner/stories/overview.mdx b/packages/web/src/components/gcds-verify-banner/stories/overview.mdx
index 5f08579c2..e9e956b71 100644
--- a/packages/web/src/components/gcds-verify-banner/stories/overview.mdx
+++ b/packages/web/src/components/gcds-verify-banner/stories/overview.mdx
@@ -50,7 +50,7 @@ import * as VerifyBanner from './gcds-verify-banner.stories';
## Resources
{/* prettier-ignore */}
-
+
-
Guidance
diff --git a/packages/web/src/index.html b/packages/web/src/index.html
index 0ab536b48..2fedb050c 100644
--- a/packages/web/src/index.html
+++ b/packages/web/src/index.html
@@ -154,7 +154,6 @@
columns-desktop="1fr 1fr 1fr"
columns-tablet="1fr 1fr"
columns="1fr"
- gap="250"
>
- Grid
+ Grids
+
+ Simple grids
+
+ Fluid grid
+
+ Each grid column takes up a fractional amount of space within the grid
+ and has no fixed width restrictions. The grid and its columns scale to
+ the size of the viewport. This example has 4 columns for large
+ viewports, 2 columns for medium viewports, and 1 column for smaller
+ viewports.
+
-
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it
- to make a type specimen book.
+
+ This is some example content to display the grid component.
-
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it
- to make a type specimen book.
+
+ This is some example content to display the grid component.
-
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it
- to make a type specimen book.
+
+ This is some example content to display the grid component.
-
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it
- to make a type specimen book.
+
+
+ Fixed grid
+
+ In fixed width grids each grid column has a fixed minimum and a maximum
+ width to limit how wide they will span on any screen size. The columns
+ scale until they either reach their minimum or their maximum width. Once
+ a grid column reaches its minimum width, it gets moved to the next row
+ if the space on the current row becomes smaller than its minimum width.
+ In this example each grid column has a minimum width of 100px and a
+ maximum width of 300px.
+
+
+
+ This is some example content to display the grid component.
+
+
+ This is some example content to display the grid component.
+
+
+ This is some example content to display the grid component.
+ Hybrid grid
+
+ Hybrid grid columns include either a minimum or a maximum width and one
+ fractional width. In this example each grid column is responsive with a
+ minimum width of 400px and no maximum width which means it takes up the
+ available space.
+
+
+
+ This is some example content to display the grid component.
+
+
+ This is some example content to display the grid component.
+
+
+
+ Individually sized grid
+
+ When using individually sized grid columns, the grid columns define
+ their own size. Each grid column can define a base, tablet (optional)
+ and desktop (optional) size.
+
+
+
+
+ Base: 1/1, tablet: 3/6, desktop: 6/12
+
+
+
+
+ Base: 1/1, tablet: 3/6, desktop: 6/12
+
+
+
+
+
+ Base: 1/1, tablet: 6/6, desktop: 4/12
+
+
+
+
+ Base: 1/1, tablet: 6/6, desktop: 4/12
+
+
+
+
+ Base: 1/1, tablet: 6/6, desktop: 4/12
+
+
+
+
+ B: 1, t: 2, d: 3
+
+
+
+ Base: 1/1, tablet: 2/6, desktop: 6/12
+
+
+
+ B: 1, t: 2, d: 3
+
+
+
+
+ Base + tablet + desktop full width
+
+
+
+
@@ -509,9 +596,13 @@
compare it to regular text.
- This is an external link.
+ This is an external link.
+
This is a
@@ -525,9 +616,9 @@
Contact us
- via email
+
+ via email
+
or by phone.
@@ -540,15 +631,20 @@
after this link.
- This is a sample link with a referrerpolicy.
+
+ This is a sample link with a referrerpolicy.
+
- Click me!
+
+ Click me!
+
+
+
+ This is a link using the light link role.
+
+