Content block cards: Align to non-gutter grid line and use CSS grid #4959
Assignees
Labels
dev
Needs some dev work
package: web components
Work necessary for the IBM.com Library web components package
priority: high
Milestone
Comments
RobertaJHahn
added
dev
asudoh
added a commit
to asudoh/ibm-dotcom-library
that referenced
this issue
Jan 26, 2021
Fixes wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. Also migrates the internal layout to CSS grid to eliminate the negative margin adjustment of heading vs. cards. Refs carbon-design-system#4959.
asudoh
added a commit
to asudoh/ibm-dotcom-library
that referenced
this issue
Jan 26, 2021
Fixes wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. Also migrates the internal layout to CSS grid to eliminate the negative margin adjustment of heading vs. cards. Refs carbon-design-system#4959.
kodiakhq bot
pushed a commit
that referenced
this issue
Jan 30, 2021
### Related Ticket(s) Refs #4959. ### Description Fixes wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. Also migrates the internal layout to CSS grid to eliminate the negative margin adjustment of heading vs. cards. ### Changelog **Changed** - Change to fix wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. - Change to migrate the internal layout to CSS grid.
IgnacioBecerra
pushed a commit
to IgnacioBecerra/ibm-dotcom-library
that referenced
this issue
Feb 22, 2021
…esign-system#5014) ### Related Ticket(s) Refs carbon-design-system#4959. ### Description Fixes wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. Also migrates the internal layout to CSS grid to eliminate the negative margin adjustment of heading vs. cards. ### Changelog **Changed** - Change to fix wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. - Change to migrate the internal layout to CSS grid.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The problem
<dds-content-block-cards>assumes that it's used within a Carbon grid with gutter. However, there are several child contents, for example, card and link list, that should be aligned to non-gutter grid line.We don't have a cohesive way how to deal with that at this point, that have caused for example the following problems:
$carbon--spacing-05(the padding of Carbon grid gutter).The solution
Make
<dds-content-block-cards>not depend on a gutter (of Carbon grid) defined in its containing element. Also, use CSS grid for its internal layout to make the internal markup simpler.The text was updated successfully, but these errors were encountered: