diff --git a/_data/design-patterns.json b/_data/design-patterns.json index 810c00d0f7..b5ad0f68b1 100644 --- a/_data/design-patterns.json +++ b/_data/design-patterns.json @@ -121,14 +121,14 @@ "modified": "dct:modified" }, "title": { - "en": "Introduction block - Documentation and working example", - "fr": "Bloc d’introduction - Documentation et example pratique" + "en": "Introduction block", + "fr": "Bloc d’introduction" }, "description": { - "en": "Guidance about using the introduction block pattern on Canada.ca.", - "fr": "Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca." + "en": "Guidance about using the introduction block component on Canada.ca.", + "fr": "Orientation sur l’utilisation du composant bloc d’introduction sur Canada.ca." }, - "modified": "2023-08-16", + "modified": "2024-06-12", "componentName": "gc-intro", "pages": { "docs": [ @@ -155,14 +155,24 @@ "path": "gc-intro-fr.html" }, { - "title": "Introduction block with image", + "title": "Introduction block with full-width image", "language": "en", - "path": "gc-intro-image-en.html" + "path": "gc-intro-full-width-image-en.html" }, { - "title": "Bloc d’introduction avec image", + "title": "Bloc d’introduction avec image pleine largeur", "language": "fr", - "path": "gc-intro-image-fr.html" + "path": "gc-intro-full-width-image-fr.html" + }, + { + "title": "Introduction block with half-width image", + "language": "en", + "path": "gc-intro-half-width-image-en.html" + }, + { + "title": "Bloc d’introduction avec image demi-largeur", + "language": "fr", + "path": "gc-intro-half-width-image-fr.html" } ] }, @@ -189,7 +199,6 @@ "en": "https://design.canada.ca/common-design-patterns/intro-block.html", "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" }, - "iteration": "_:iteration_intro_1", "example": [ { "en": { "href": "gc-intro-en.html", "text": "Introduction block" }, @@ -208,12 +217,12 @@ }, { "name": { - "en": "Introduction block with image", - "fr": "Bloc d'introduction avec image" + "en": "Introduction block with full-width image", + "fr": "Bloc d'introduction avec image pleine largeur" }, "description": { - "en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.", - "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image." + "en": "The introduction block pattern introduces the content of a landing page. This variation contains an image.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation contient une image." }, "guidance": { "en": "https://design.canada.ca/common-design-patterns/intro-block.html", @@ -221,12 +230,12 @@ }, "example": [ { - "en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" }, - "fr": { "href": "gc-intro-image-fr.html", "text": "Bloc d'introduction avec image" } + "en": { "href": "gc-intro-full-width-image-en.html", "text": "Introduction block with full-width image" }, + "fr": { "href": "gc-intro-full-width-image-fr.html", "text": "Bloc d'introduction avec image pleine largeur" } } ], "implementation": [ - "_:implement_intro_image" + "_:implement_intro_full_width_image" ], "history": [ { @@ -234,12 +243,40 @@ "fr": "Mars 2024 - Implémentation initiale de la variante." } ] + }, + { + "name": { + "en": "Introduction block with half-width image", + "fr": "Bloc d'introduction avec image demi-largeur" + }, + "description": { + "en": "The introduction block pattern introduces the content of a landing page. This variation contains an image.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation contient une image." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/intro-block.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" + }, + "example": [ + { + "en": { "href": "gc-intro-half-width-image-en.html", "text": "Introduction block with half-width image" }, + "fr": { "href": "gc-intro-half-width-image-fr.html", "text": "Bloc d'introduction avec image demi-largeur" } + } + ], + "implementation": [ + "_:implement_intro_half_width_image" + ], + "history": [ + { + "en": "June 2024 - Initial implementation of the variation.", + "fr": "Juin 2024 - Implémentation initiale de la variante." + } + ] } ], "implementation": [ { "@id": "_:implement_intro", - "iteration": "_:iteration_intro_1", "name": { "en": "Standard", "fr": "Standard" @@ -278,8 +315,7 @@ } }, { - "@id": "_:implement_intro_image", - "iteration": "_:iteration_intro_image_1", + "@id": "_:implement_intro_full_width_image", "name": { "en": "Standard", "fr": "Standard" @@ -290,12 +326,12 @@ }, "instructions": { "en": [ - "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "This introduction block variant is a mandatory element for institutional landing pages. It’s optional for other landing pages.", "According to the Canada.ca design system guidance, the introduction block with image contains the following elements:", "Refer to the code sample below." ], "fr": [ - "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", + "Cette variante du bloc d'introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants :", "Référez-vous au code qui suit." ] @@ -312,7 +348,7 @@ }, "notes": { "en": [ - "The introduction block pattern with image must be located outside of the default page container (or any element with the class .container)." + "The introduction block with image pattern must be located outside of the default page container (or any element with the class .container)." ], "fr": [ "La configuration de conception du bloc d’introduction avec image doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe .container)." @@ -323,14 +359,69 @@ { "@type": "source-code", "description": "Code sample:", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

Introduction block with full-width image

\n\t\t\t\t

The introduction block pattern introduces the content of a landing page.

\n\t\t\t\t

Supertask button

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

Bloc d'introduction avec image pleine largeur

\n\t\t\t\t

La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ] + } + }, + { + "@id": "_:implement_intro_half_width_image", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the component manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." + }, + "instructions": { + "en": [ + "This introduction block variant is a mandatory element for topic pages.", + "According to the Canada.ca design system guidance, the introduction block with half-width image contains the following elements:", + "Refer to the code sample below." + ], + "fr": [ + "Cette variante du bloc d’introduction est un élément obligatoire pour les pages de sujet.", + "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image demi largeur contient les éléments suivants :", + "Référez-vous au code qui suit." + ] + }, + "techConsiderations": { + "en": [ + "The size recommended for this variant's image is 520px by 200px. For more information on the half-width image, please consult the official guidelines. If the image is decorative, meaning it doesn't provide any message and doesn't contain any text, ensure the text alternative is empty on the image. Otherwise, provide a text alternative that represents the message illustrated by the image and a text alternative that contains every words, written as is, in the text alternative." + ], + "fr": [ + "La taille d’image recommandée pour cette variante est de 520 px par 200 px. Pour plus d’informations sur l’image demi-largeur, veuillez consulter les directives officielles. Si l'image est décorative, c'est-à-dire qu'elle ne transmet aucun message et ne contient aucun texte, assurez-vous que le texte alternatif est vide sur l'image. Sinon, fournissez un texte alternatif qui représente le message illustré par l’image et qui contient tous les mots, écrits tels quels dans l'image." + ] + }, + "notes": { + "en": [ + "The introduction block with half-width image pattern must be located outside of the default page container (or any element with the class .container)." + ], + "fr": [ + "La configuration de conception du bloc d’introduction avec image demi-largeur doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe .container)." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "
\n\t
\n\t\t

Introduction block with half-width image

\n\t\t

The introduction block pattern introduces the content of a landing page.

\n\t\t

Supertask button

\n\t
\n\t
\n\t\t\"\"\n\t
\n
" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code :", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t

Bloc d'introduction avec image demi-largeur

\n\t\t

La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.

\n\t\t

Bouton de super-tâche

\n\t
\n\t
\n\t\t\"\"\n\t
\n
" } ] } diff --git a/_includes/design-patterns/gc-intro/gc-intro-image.html b/_includes/design-patterns/gc-intro/gc-intro-full-width-image.html similarity index 78% rename from _includes/design-patterns/gc-intro/gc-intro-image.html rename to _includes/design-patterns/gc-intro/gc-intro-full-width-image.html index 2fddb5f8e6..327c2960f2 100644 --- a/_includes/design-patterns/gc-intro/gc-intro-image.html +++ b/_includes/design-patterns/gc-intro/gc-intro-full-width-image.html @@ -2,7 +2,7 @@
-

{{ page.title }}

+

{% if page.language == "en" %}Introduction block with full-width image{% else %}Bloc d'introduction avec image pleine largeur{% endif %}

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

diff --git a/_includes/design-patterns/gc-intro/gc-intro-half-width-image.html b/_includes/design-patterns/gc-intro/gc-intro-half-width-image.html new file mode 100644 index 0000000000..915122ef93 --- /dev/null +++ b/_includes/design-patterns/gc-intro/gc-intro-half-width-image.html @@ -0,0 +1,10 @@ + +
+
+

{% if page.language == "en" %}Introduction block with half-width image{% else %}Bloc d'introduction avec image demi-largeur{% endif %}

+

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

+
+ +
diff --git a/design-patterns/gc-intro/gc-intro-doc-en.html b/design-patterns/gc-intro/gc-intro-doc-en.html index e857f19897..8678a0f49e 100644 --- a/design-patterns/gc-intro/gc-intro-doc-en.html +++ b/design-patterns/gc-intro/gc-intro-doc-en.html @@ -3,7 +3,7 @@ description: Documentation for the introduction block design pattern. language: en altLangPage: gc-intro-doc-fr.html -dateModified: 2024-03-14 +dateModified: 2024-06-10 layout: documentation_pattern index_json: index.json-ld --- diff --git a/design-patterns/gc-intro/gc-intro-doc-fr.html b/design-patterns/gc-intro/gc-intro-doc-fr.html index 0af014ea83..af2ad4e26d 100644 --- a/design-patterns/gc-intro/gc-intro-doc-fr.html +++ b/design-patterns/gc-intro/gc-intro-doc-fr.html @@ -3,7 +3,7 @@ description: Documentation de la configuration de conception du bloc d’introduction. language: fr altLangPage: gc-intro-doc-en.html -dateModified: 2024-03-14 +dateModified: 2024-06-10 layout: documentation_pattern index_json: index.json-ld --- diff --git a/design-patterns/gc-intro/gc-intro-full-width-image-en.html b/design-patterns/gc-intro/gc-intro-full-width-image-en.html new file mode 100644 index 0000000000..be5a56b89c --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-full-width-image-en.html @@ -0,0 +1,21 @@ +--- +{ + "title": "Introduction block with full-width image", + "language": "en", + "altLangPage": "gc-intro-full-width-image-fr.html", + "layout": "no-container", + "dateModified": "2024-06-13", + "breadcrumbs": [ + { "title": "Introduction block - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-en.html" } + ], + "layout": "no-container" +} +--- +
+ +{% include_relative samples/gc-intro-full-width-image.html %} + +
+

Code sample

+ {% highlight html %}{% include_relative samples/gc-intro-full-width-image.html %}{% endhighlight %} +
diff --git a/design-patterns/gc-intro/gc-intro-full-width-image-fr.html b/design-patterns/gc-intro/gc-intro-full-width-image-fr.html new file mode 100644 index 0000000000..582ca6d406 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-full-width-image-fr.html @@ -0,0 +1,21 @@ +--- +{ + "title": "Bloc d'introduction avec image pleine largeur", + "language": "fr", + "altLangPage": "gc-intro-full-width-image-en.html", + "layout": "no-container", + "dateModified": "2024-06-11", + "breadcrumbs": [ + { "title": "Bloc d'introduction - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-fr.html" } + ], + "layout": "no-container" +} +--- +
+ +{% include_relative samples/gc-intro-full-width-image.html %} + +
+

Code

+ {% highlight html %}{% include_relative samples/gc-intro-full-width-image.html %}{% endhighlight %} +
diff --git a/design-patterns/gc-intro/gc-intro-half-width-image-en.html b/design-patterns/gc-intro/gc-intro-half-width-image-en.html new file mode 100644 index 0000000000..3d968544b1 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-half-width-image-en.html @@ -0,0 +1,18 @@ +--- +{ + "title": "Introduction block with half-width image", + "language": "en", + "altLangPage": "gc-intro-half-width-image-fr.html", + "layout": "without-h1", + "dateModified": "2024-06-13", + "breadcrumbs": [ + { "title": "Introduction block - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-en.html" } + ] +} +--- +
+ +{% include_relative samples/gc-intro-half-width-image.html %} + +

Code sample

+{% highlight html %}{% include_relative samples/gc-intro-half-width-image.html %}{% endhighlight %} diff --git a/design-patterns/gc-intro/gc-intro-half-width-image-fr.html b/design-patterns/gc-intro/gc-intro-half-width-image-fr.html new file mode 100644 index 0000000000..6bcb38a2d5 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-half-width-image-fr.html @@ -0,0 +1,18 @@ +--- +{ + "title": "Bloc d'introduction avec image demi largeur", + "language": "fr", + "altLangPage": "gc-intro-half-width-image-en.html", + "layout": "without-h1", + "dateModified": "2024-06-13", + "breadcrumbs": [ + { "title": "Bloc d'introduction - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-fr.html" } + ] +} +--- +
+ +{% include_relative samples/gc-intro-half-width-image.html %} + +

Code

+{% highlight html %}{% include_relative samples/gc-intro-half-width-image.html %}{% endhighlight %} diff --git a/design-patterns/gc-intro/gc-intro-image-en.html b/design-patterns/gc-intro/gc-intro-image-en.html deleted file mode 100644 index 9340af1070..0000000000 --- a/design-patterns/gc-intro/gc-intro-image-en.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -{ - "title": "Introduction block with image", - "language": "en", - "altLangPage": "gc-intro-image-fr.html", - "dateModified": "2024-03-14", - "breadcrumbs": [ - { "title": "Introduction block - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-en.html" } - ], - "layout": "no-container" -} ---- -
- -{% include_relative samples/gc-intro-image.html %} - -
-

Code sample

- {% highlight html %}{% include_relative samples/gc-intro-image.html %}{% endhighlight %} -
diff --git a/design-patterns/gc-intro/gc-intro-image-fr.html b/design-patterns/gc-intro/gc-intro-image-fr.html deleted file mode 100644 index 4751dcc3c1..0000000000 --- a/design-patterns/gc-intro/gc-intro-image-fr.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -{ - "title": "Bloc d'introduction avec image", - "language": "fr", - "altLangPage": "gc-intro-image-en.html", - "layout": "no-container", - "dateModified": "2024-03-14", - "breadcrumbs": [ - { "title": "Bloc d'introduction - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-fr.html" } - ], - "layout": "no-container" -} ---- -
- -{% include_relative samples/gc-intro-image.html %} - -
-

Code

- {% highlight html %}{% include_relative samples/gc-intro-image.html %}{% endhighlight %} -
diff --git a/design-patterns/gc-intro/img/825x200.jpg b/design-patterns/gc-intro/img/825x200.jpg new file mode 100644 index 0000000000..bcc922e9c4 Binary files /dev/null and b/design-patterns/gc-intro/img/825x200.jpg differ diff --git a/design-patterns/gc-intro/index.json-ld b/design-patterns/gc-intro/index.json-ld index 5edea049e8..d7058d57a7 100644 --- a/design-patterns/gc-intro/index.json-ld +++ b/design-patterns/gc-intro/index.json-ld @@ -7,14 +7,14 @@ "modified": "dct:modified" }, "title": { - "en": "Introduction block - Documentation and working example", - "fr": "Bloc d’introduction - Documentation et example pratique" + "en": "Introduction block", + "fr": "Bloc d’introduction" }, "description": { - "en": "Guidance about using the introduction block pattern on Canada.ca.", - "fr": "Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca." + "en": "Guidance about using the introduction block component on Canada.ca.", + "fr": "Orientation sur l’utilisation du composant bloc d’introduction sur Canada.ca." }, - "modified": "2023-08-16", + "modified": "2024-06-12", "componentName": "gc-intro", "pages": { "docs": [ @@ -41,14 +41,24 @@ "path": "gc-intro-fr.html" }, { - "title": "Introduction block with image", + "title": "Introduction block with full-width image", "language": "en", - "path": "gc-intro-image-en.html" + "path": "gc-intro-full-width-image-en.html" }, { - "title": "Bloc d’introduction avec image", + "title": "Bloc d’introduction avec image pleine largeur", "language": "fr", - "path": "gc-intro-image-fr.html" + "path": "gc-intro-full-width-image-fr.html" + }, + { + "title": "Introduction block with half-width image", + "language": "en", + "path": "gc-intro-half-width-image-en.html" + }, + { + "title": "Bloc d’introduction avec image demi-largeur", + "language": "fr", + "path": "gc-intro-half-width-image-fr.html" } ] }, @@ -75,7 +85,6 @@ "en": "https://design.canada.ca/common-design-patterns/intro-block.html", "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" }, - "iteration": "_:iteration_intro_1", "example": [ { "en": { "href": "gc-intro-en.html", "text": "Introduction block" }, @@ -94,12 +103,12 @@ }, { "name": { - "en": "Introduction block with image", - "fr": "Bloc d'introduction avec image" + "en": "Introduction block with full-width image", + "fr": "Bloc d'introduction avec image pleine largeur" }, "description": { - "en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.", - "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image." + "en": "The introduction block pattern introduces the content of a landing page. This variation contains an image.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation contient une image." }, "guidance": { "en": "https://design.canada.ca/common-design-patterns/intro-block.html", @@ -107,12 +116,12 @@ }, "example": [ { - "en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" }, - "fr": { "href": "gc-intro-image-fr.html", "text": "Bloc d'introduction avec image" } + "en": { "href": "gc-intro-full-width-image-en.html", "text": "Introduction block with full-width image" }, + "fr": { "href": "gc-intro-full-width-image-fr.html", "text": "Bloc d'introduction avec image pleine largeur" } } ], "implementation": [ - "_:implement_intro_image" + "_:implement_intro_full_width_image" ], "history": [ { @@ -120,12 +129,40 @@ "fr": "Mars 2024 - Implémentation initiale de la variante." } ] + }, + { + "name": { + "en": "Introduction block with half-width image", + "fr": "Bloc d'introduction avec image demi-largeur" + }, + "description": { + "en": "The introduction block pattern introduces the content of a landing page. This variation contains an image.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation contient une image." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/intro-block.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" + }, + "example": [ + { + "en": { "href": "gc-intro-half-width-image-en.html", "text": "Introduction block with half-width image" }, + "fr": { "href": "gc-intro-half-width-image-fr.html", "text": "Bloc d'introduction avec image demi-largeur" } + } + ], + "implementation": [ + "_:implement_intro_half_width_image" + ], + "history": [ + { + "en": "June 2024 - Initial implementation of the variation.", + "fr": "Juin 2024 - Implémentation initiale de la variante." + } + ] } ], "implementation": [ { "@id": "_:implement_intro", - "iteration": "_:iteration_intro_1", "name": { "en": "Standard", "fr": "Standard" @@ -164,8 +201,7 @@ } }, { - "@id": "_:implement_intro_image", - "iteration": "_:iteration_intro_image_1", + "@id": "_:implement_intro_full_width_image", "name": { "en": "Standard", "fr": "Standard" @@ -176,12 +212,12 @@ }, "instructions": { "en": [ - "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "This introduction block variant is a mandatory element for institutional landing pages. It’s optional for other landing pages.", "According to the Canada.ca design system guidance, the introduction block with image contains the following elements:", "Refer to the code sample below." ], "fr": [ - "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", + "Cette variante du bloc d'introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants :", "Référez-vous au code qui suit." ] @@ -198,7 +234,7 @@ }, "notes": { "en": [ - "The introduction block pattern with image must be located outside of the default page container (or any element with the class .container)." + "The introduction block with image pattern must be located outside of the default page container (or any element with the class .container)." ], "fr": [ "La configuration de conception du bloc d’introduction avec image doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe .container)." @@ -209,14 +245,69 @@ { "@type": "source-code", "description": "Code sample:", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

Introduction block with full-width image

\n\t\t\t\t

The introduction block pattern introduces the content of a landing page.

\n\t\t\t\t

Supertask button

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

Bloc d'introduction avec image pleine largeur

\n\t\t\t\t

La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ] + } + }, + { + "@id": "_:implement_intro_half_width_image", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the component manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." + }, + "instructions": { + "en": [ + "This introduction block variant is a mandatory element for topic pages.", + "According to the Canada.ca design system guidance, the introduction block with half-width image contains the following elements:", + "Refer to the code sample below." + ], + "fr": [ + "Cette variante du bloc d’introduction est un élément obligatoire pour les pages de sujet.", + "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image demi largeur contient les éléments suivants :", + "Référez-vous au code qui suit." + ] + }, + "techConsiderations": { + "en": [ + "The size recommended for this variant's image is 520px by 200px. For more information on the half-width image, please consult the official guidelines. If the image is decorative, meaning it doesn't provide any message and doesn't contain any text, ensure the text alternative is empty on the image. Otherwise, provide a text alternative that represents the message illustrated by the image and a text alternative that contains every words, written as is, in the text alternative." + ], + "fr": [ + "La taille d’image recommandée pour cette variante est de 520 px par 200 px. Pour plus d’informations sur l’image demi-largeur, veuillez consulter les directives officielles. Si l'image est décorative, c'est-à-dire qu'elle ne transmet aucun message et ne contient aucun texte, assurez-vous que le texte alternatif est vide sur l'image. Sinon, fournissez un texte alternatif qui représente le message illustré par l’image et qui contient tous les mots, écrits tels quels dans l'image." + ] + }, + "notes": { + "en": [ + "The introduction block with half-width image pattern must be located outside of the default page container (or any element with the class .container)." + ], + "fr": [ + "La configuration de conception du bloc d’introduction avec image demi-largeur doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe .container)." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "
\n\t
\n\t\t

Introduction block with half-width image

\n\t\t

The introduction block pattern introduces the content of a landing page.

\n\t\t

Supertask button

\n\t
\n\t
\n\t\t\"\"\n\t
\n
" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code :", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t

Bloc d'introduction avec image demi-largeur

\n\t\t

La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.

\n\t\t

Bouton de super-tâche

\n\t
\n\t
\n\t\t\"\"\n\t
\n
" } ] } diff --git a/design-patterns/gc-intro/samples/gc-intro-image.html b/design-patterns/gc-intro/samples/gc-intro-full-width-image.html similarity index 78% rename from design-patterns/gc-intro/samples/gc-intro-image.html rename to design-patterns/gc-intro/samples/gc-intro-full-width-image.html index 2fddb5f8e6..327c2960f2 100644 --- a/design-patterns/gc-intro/samples/gc-intro-image.html +++ b/design-patterns/gc-intro/samples/gc-intro-full-width-image.html @@ -2,7 +2,7 @@
-

{{ page.title }}

+

{% if page.language == "en" %}Introduction block with full-width image{% else %}Bloc d'introduction avec image pleine largeur{% endif %}

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

diff --git a/design-patterns/gc-intro/samples/gc-intro-half-width-image.html b/design-patterns/gc-intro/samples/gc-intro-half-width-image.html new file mode 100644 index 0000000000..915122ef93 --- /dev/null +++ b/design-patterns/gc-intro/samples/gc-intro-half-width-image.html @@ -0,0 +1,10 @@ + +
+
+

{% if page.language == "en" %}Introduction block with half-width image{% else %}Bloc d'introduction avec image demi-largeur{% endif %}

+

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

+
+ +
diff --git a/index-en.md b/index-en.md index 4b91419a85..3260aa5b70 100644 --- a/index-en.md +++ b/index-en.md @@ -288,17 +288,7 @@ css: {% assign list-pages = designPattern.pages %}
  • -

    {{ designPattern.title[ page.language ] }} - {% if designPattern.status == "stable" %} - State: {{ comp_status[ designPattern.status ] }} - {% elsif designPattern.status == "provisional" %} - State: {{ comp_status[ designPattern.status ] }} - {% elsif designPattern.status == "deprecated" %} - State: {{ comp_status[ designPattern.status ] }} - {% else %} - State: Undefined - {% endif %} -

    +

    {{ designPattern.title[ page.language ] }}

    {{ designPattern.description[ page.language ] | default: "[Short description of the design pattern]" }}