Skip to content

Instantly share code, notes, and snippets.

@benjclark
Last active May 22, 2024 15:05
Show Gist options
  • Save benjclark/90339e53b14d95b559a9fe7ad5fbc93d to your computer and use it in GitHub Desktop.
Save benjclark/90339e53b14d95b559a9fe7ad5fbc93d to your computer and use it in GitHub Desktop.
thoughts on using eds-c-composable-card to implement the card open design
what we have now:
<article class="app-card-open{{#if pictures}} app-card-open--has-image{{/if}}{{#if fullWidth}} app-card-open--full-width{{/if}}{{#if compact}} app-card-open--compact{{/if}}">
<div class="app-card-open__main">
<h3></h3>
{{> author-list}} {{!-- from EDS --}}
{{> meta}} {{!-- from EDS --}}
{{> collection-list}} {{!-- from Oscar --}}
</div>
{{#if pictures}}
<div class="app-card-open__sidebar">
<img src="" alt="">
</div>
{{/if}}
</article>
what we would have if we used eds-c-composable-card:
{{#> eds-c-card-composable}} {{!-- from EDS --}}
<div class="app-card-open{{#if pictures}} app-card-open--has-image{{/if}}{{#if fullWidth}} app-card-open--full-width{{/if}}{{#if compact}} app-card-open--compact{{/if}}">
<div class="app-card-open__main">
<h3></h3>
{{> author-list}} {{!-- from EDS --}}
{{> meta}} {{!-- from EDS --}}
{{> collection-list}} {{!-- from Oscar --}}
</div>
{{#if pictures}}
<div class="app-card-open__sidebar">
<img src="" alt="">
</div>
{{/if}}
</div>
{{/eds-c-card-composable}}
most of the Sass in https://github.com/springernature/oscar/blob/main/lib/frontend/sites/oscar-sites-springer/src/app-springerlink/scss/partials/darwin/_card-open.scss is retained, only a few lines removed
using eds-c-card-composable doesn't really save any code or add anything significant to this particular implementation of the card-open design
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment