Use grid layout with grid-areas for card component

[ricominten]

Can we use grid layout with grid-areas to determine the layout for the card component.

Benefits:
Setting elements of the card (title/image/text/etc.) to a grid-area makes the card much more flexible in its use. Designers are now able to change the layout without it breaking the core component. All the developer has to do is re-assign the grid to update the design.

[jennasalau]

Hey @ricominten can you provide an example here just so we are clear on what you are suggesting. Sounds promising.

[ricominten]

Similar to the RUI-Layout we can have 1 defined HTML markup with different visual representations. As the card element will have limited content and elements it should not affect A11Y.

To create the below layout the following CSS is required:

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "image"
      "title"
      "subtitle"
      "content"
      "actions";
}

.container {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "icon title"
      "icon subtitle"
      "image image"
      "content content"
      "actions actions";
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "title image"
      "subtitle image"
      "content image"
      "actions image";
}

[ricominten]

For an example see here:
https://codepen.io/ricominten/pen/pXPGrj