Feat(web): Introduce Card component #DS-1397
#1751
Conversation
adamkudrna
force-pushed
the
feat/web-card
branch
2 times, most recently
from
4961e78
to
1e80a46
Compare
✅ Deploy Preview for spirit-design-system-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for spirit-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
❤️ |
| } | ||
|
|
||
| // 1. | ||
| .CardBody p { |
There was a problem hiding this comment.
we need this only when the cardLink is present, right? And if the heading is not a cardlink (only the media for example), shouldn't the heading be selectable too?
There was a problem hiding this comment.
- Yes, fixed.
- No, there is a link inside the title (or should be).
| .CardLink:first-of-type { | ||
| @include links.stretch(); | ||
|
|
||
| text-decoration: none; |
There was a problem hiding this comment.
shouldn't this prop be applied to all cardlinks?
There was a problem hiding this comment.
I don't think so. It's intentionally bound to the stretching feature so the underline doesn't flicker on hover. :first-of-type is here to make sure just the first .CardLink is stretched in case user accidentally throws in more of them. But 🤷🏻♂️
|
|
||
| color: theme.$heading-color; | ||
|
|
||
| &:not(:last-child) { |
There was a problem hiding this comment.
Or maybe not. The mixin is originally intended to separate direct children of Card with a unified gap. It's too generic, maybe I should better get rid of it…
| <!-- End user content --> | ||
| </div> | ||
| <footer class="CardActions CardActions--alignmentXLeft"> | ||
| <a href="#" class="Button Button--medium Button--primary">Primary</a> |
There was a problem hiding this comment.
can you use a button somewhere so we can see it works correctly?
|
Horizontal cards do not fit on mobile screen :( |
| </footer> | ||
| </article> | ||
|
|
||
| <!-- TODO: Do we want to present the auto size in horizontal layout? The image is huge… --> |
There was a problem hiding this comment.
What shall we do with this? 🤔
crishpeen
force-pushed
the
integration/card
branch
from
68268e8
to
271af54
Compare
crishpeen
force-pushed
the
feat/web-card
branch
from
fba0c99
to
028a33d
Compare
Description
Additional context
Issue reference