Add card component(s) #174
Labels
architecture-website
CONSUMER: Indicates that this is required by the architecture microsite
buildit-website
CONSUMER: Indicates that this is required by the Buildit website
🌟 enhancement
TYPE: Indicates new feature requests
ui
CATEGORY: Anything related to the design or implementation of UI components and styles
Milestone
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. |
james-nash
added
architecture-website
Merged
dw-buildit
added a commit
that referenced
this issue
May 13, 2019
affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web @james-nash assisted in ensuring the margin logic is bulletproof ISSUES CLOSED: #174
dw-buildit
added a commit
that referenced
this issue
May 13, 2019
affects: @buildit/gravity-ui-nunjucks, @buildit/gravity-ui-web @james-nash assisted in ensuring the margin logic is bulletproof ISSUES CLOSED: #174, WEB-285
buildit-dev
pushed a commit
that referenced
this issue
Mar 24, 2020
# [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 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: