feat: add bilingual topic page templates with CSS shortcuts#116
feat: add bilingual topic page templates with CSS shortcuts#116delisma wants to merge 1 commit intocds-snc:mainfrom
Conversation
delisma
changed the title
| <div> | ||
| <gcds-link class="font-family-heading font-bold mt-0" href="#">[Hyperlink text]</gcds-link> | ||
| <p class="font-size-text-small lg:mb-200 xs:mb-0">Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to</p> | ||
| </div> |
There was a problem hiding this comment.
@duboisp No, the Service and information doormat will not be replaced by the GCDS card design. The design components of the Canada.ca specifications will be brought into GCDS. Whether it becomes it's own component or not, because it has variants, single column 2/3, grey banding bkg or not, etc. we will see as we go with this contribution.
| <gcds-container size="xl" main-container centered> | ||
| <gcds-grid columns="1" columns-tablet="1" columns-desktop="auto 1fr"> | ||
| <!-- Heading column --> | ||
| <h2 class="limit mt-0 mb-0 font-size-h3">Most requested</h2> |
There was a problem hiding this comment.
I suggest to move this heading between the "section" and the "gcds-container" element because if the user change the number of column in the gcds-grid layout, that will impact how that heading is displayed and might provide unexpected result.
There was a problem hiding this comment.
@duboisp This is a proof of concept to use CSS styles to produce Canada.ca specifications with GCDS to keep moving us forward, this should not be available for a user to modify the design and column of components like Most requested. Ideally, we turn it into a component.
Is there any other reason to move it?
3 participants
This PR introduces comprehensive bilingual topic page templates that demonstrate modern GCDS (Government of Canada Design System) implementation with CSS utility shortcuts.
Complete Topic Page Structure:
Related issues
While building the templates we have encountered a few issues
xs:doesn't apply #119Usage
These templates serve as prototypes of topic pages that follow Canada.ca design standards while leveraging GCDS components and CSS shortcuts for efficient development. A few patterns should be considered to be transformed into a GCDS components in order to introduce variants of patterns and reduce verbosity of some tag elements.
cc: @jmealing