-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add card component(s) #174
Comments
Note, our style guide does currently contain a "list img cards" component. However, it is not currently in use anywhere (weirdly, the website has a Handlebars version of this, but it does not make use of it). I think this was probably added more as an example. We shouldn't be afraid of removing / replacing it with something else if needed. At a minimum, the "card" portion of it ought to be broken out as a separate template. |
affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web @james-nash assisted in ensuring the margin logic is bulletproof ISSUES CLOSED: #174
affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web @james-nash assisted in ensuring the margin logic is bulletproof ISSUES CLOSED: #174, WEB-285
# [3.0.0](gravity-ui-web-v2.2.4...gravity-ui-web-v3.0.0) (2020-03-24) ### Bug Fixes * **a11y:** fix article's a11y violation ([743c605](743c605)) * **a11y:** fix card violations ([3f4cba1](3f4cba1)), closes [#375](#375) * **a11y:** update gravity-particles version ([b864736](b864736)), closes [#387](#387) * **basic card list:** changed breakpoint for two column layout ([acbe86d](acbe86d)) * **basic card list:** only set required margins ([62cb841](62cb841)) * **basic cards list:** remove whitespace on list sides ([d9e4b2a](d9e4b2a)) * **callout:** remove margin from list when in columns ([5d7587d](5d7587d)) * **callout:** tweaks layout ([af320c1](af320c1)) * **card-basic:** fixes size of picture elements ([e44da69](e44da69)) * **cite:** move cite to inline text ([8d347d3](8d347d3)) * **container:** undoes layout regression caused by previous "fix" ([d5c86ad](d5c86ad)) * **hero:** makes container overlap banner ([aef22c2](aef22c2)) * **layout:** fixes broken container max-width value ([cc4f453](cc4f453)) * **layouts:** n-column layouts no longer cause horizontal scrolling ([4c18a3c](4c18a3c)) * **package.json:** web package no longer fails on test ([d8edea6](d8edea6)) * **pre elements:** ensured pre elements with lots of text can scroll ([f52b60f](f52b60f)) * **related items:** used breakpoint code from typography changes ([0bbddb1](0bbddb1)) * **spacing:** added incomplete xxl spacing unit ([4c3295b](4c3295b)) * **svg symbols:** fixes missing title IDs ([256a828](256a828)), closes [#369](#369) * **typography:** fixes text scaling behaviour ([6ee3f92](6ee3f92)) ### Code Refactoring * removed job list component ([b1a972f](b1a972f)) * **column layout:** refactored layouts to use new column layout ([c3bcfe8](c3bcfe8)) * removes clear() SASS mixin ([6df5c7f](6df5c7f)) * removes list-image-links and logo-image components ([274cf6e](274cf6e)), closes [#275](#275) * removes redundant `grav-o-section` class ([027782c](027782c)) ### Features * **3 column class list:** add 3 column class ([58d1294](58d1294)) * **3col-list-justified:** new 3 column list with justified text ([0d345df](0d345df)) * **a11y:** add a11y tests to Travis CI ([85778f2](85778f2)) * **articles:** new related items component ([4735694](4735694)) * **basic card:** added hover colour and svg icon treatment ([cbe7ed6](cbe7ed6)) * **basic card:** adjusted font size for copy section ([3072504](3072504)) * **basic card component:** add notch to image when card is a link ([149e539](149e539)) * **basic card component:** added basic card component ([a183257](a183257)) * **basic cards list:** ensured top margin is applied consistently ([e179a88](e179a88)), closes [#174](#174) * **callout:** new callout organism component ([c8a23db](c8a23db)) * **colors:** adds dark-mode support to color system ([5d07454](5d07454)) * **colors:** adds SASS vars for Wipro brand colors ([434663e](434663e)) * **colors:** updates mark element styling to use Gravity's color system ([d8d1d40](d8d1d40)) * **colors:** updates to latest Gravity particles color schemes ([db8e888](db8e888)) * **column layout:** adds mixin for full-width items ([da9506c](da9506c)) * **debug.css:** adds warning about invisible first-children ([3ea62ae](3ea62ae)), closes [#200](#200) * **eslint:** moved eslint settings to a shareable config ([51339e2](51339e2)) * **hero:** new hero component ([32c6870](32c6870)) * **layout:** adds list reset mixin and classes ([7335c63](7335c63)) * **layout:** adds sticky-footer mixin and object class ([4dcefe1](4dcefe1)) * **layout:** makes full-bleed page layout opt-in ([a807722](a807722)) * **layout:** makes sticky footer default configurable ([f7276b3](f7276b3)) * **layout:** standardises gap after page header ([c55d85c](c55d85c)) * **links:** adjusts styling of link components ([4b36fca](4b36fca)) * **linting:** updates stylelint rules ([f126ab2](f126ab2)), closes [#245](#245) * adds margin utility classes ([f8c4b9c](f8c4b9c)) * **logotype:** changes SVG colouring and adds new logotype component ([7a2728f](7a2728f)) * **typography:** implements fluid modular scale ([c122fbf](c122fbf)) * adds optional classes for page header and footer ([e481709](e481709)), closes [#280](#280) * **ostentatious copy:** added ostentatious copy component ([9c3d60c](9c3d60c)) * **page heading:** added page heading component ([b75fca9](b75fca9)) * **page-footer:** adds smart border to top of footer ([ff2e5ab](ff2e5ab)) * **spacing settings, new padding utils:** adds padding util classes ([9cb0e94](9cb0e94)) * **svg:** improves colouring of inlined SVGs ([e04da74](e04da74)) * **svg:** replaces old SVG symbols with ones from gravity-particles ([49eb3b4](49eb3b4)) * **transitions:** added transition mixin and updated throughout ([0d0da87](0d0da87)) * **two column list:** added simple two column list component ([77e41eb](77e41eb)) * **typography:** changes fonts to Wipro Akkurat TT family ([9fca955](9fca955)) * adds SASS mixins for smart borders ([603ff6c](603ff6c)) * bundles external SASS libs ([bb07594](bb07594)) * improves picture element layout ([31bd6bc](31bd6bc)) * splits templates & PL setup into own NPM package ([949ca01](949ca01)), closes [#241](#241) ### BREAKING CHANGES * **logotype:** Page header and footer components should now use grav-c-logotype class on logotype SVG. * **typography:** - The 'secondary' entry has been removed from Gravy's typefaces config. Any references to the 'secondary' typeface should therefore be replace with 'primary' instead. - All fonts have changed, so the visual appearance will be different. You should probably visually inspect your layouts to ensure nothing has broken. * **svg:** All symbol IDs have changed. The social media, "hollow b", Designit and Wipro Digital logos have been removed. * **layout:** grav-l-column-list mixin and grav-o-column-list class have been removed. Use grav-reset-list and grav-o-reset-list instead. * `grav-o-section` class is no longer available. Consider altering your designs or using the padding utility classes instead. * **layout:** - `<body>` now has horizontal margins, vertical padding and max-width by default. Add the `grav-o-full-bleed` class to it to restore the old behaviour. - `.grav-o-container` class has been removed. Use `.grav-o-full-bleed__content` class instead (within a container that has the `.grav-o-full-bleed__content` class on it). * **svg:** grav-c-icon class has been removed. Inlined SVGs now automatically get filled with the currentColor. * **column layout:** removed `two-column-text` and `two-column-block` components * Job List component has been removed * The styles for the \`.grav-c-list-image-links\` and \`.grav-c-logo-image\` classes no longer exist. * **typography:** Gravy and normaliz-scss libs have been removed, so all associated functions and mixins are no longer available * The clear() SASS mixin has been removed. Replace any usage of it with your own CSS clearfix.
🎉 This issue has been resolved in version 3.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
A UI inventory of https://www.builditonboarding.com/, which intends to migrate to Gravity, highlighted the need for a card(-like) components which we don't currently have.
Essentially, we need something that is a link to an article or post within a site and contains:
When we implement this, we should take a close look at this excellent article: https://inclusive-components.design/cards/ to ensure we choose the most appropriate mark-up.
The text was updated successfully, but these errors were encountered: