Fix spacing between columns for Featured Card with better Gutters Between prop and support Card Border with bordered

Created on 26 July 2023, over 1 year ago
Updated 10 September 2023, about 1 year ago

Problem/Motivation

Presently, there is a spacing problem with the Featured Card, as it is set to 15px instead of following the padding of bs5 cols.

Proposed resolution

  • Add the bordered css class to all Card components ( When the Card Border prop is true )
  • Manage custom styling and spacing with .card.bordered and with .card.border-0 on nested card-body or card-content
  • Add Gutters Between as a new component prop and pattern settings only for the Featured Card component

Having the following default pattern settings for Varbase Cards - with Gutter Between options only for the Featured Card

Large Gutter between were sat as the default for (X-Large, Large, and Medium) of Featured Card sizes in VMI
Small end Gutter between were sat as the default for (Small and X-Small) of Featured Card sizes in VMI

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ✅ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release Varbase 10.0.0-beta1 , varbase_components-2.0.0-alpha18

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

Featured Card - xsmall style size with Large gutters between

Featured Card - xsmall style size with Small start gutters between

Featured Card - xsmall style size with Small end gutters between

Featured Card - xsmall style size with No Gutter gutters between

Back-end pattern settings edit view for the Gutter Between as Small end for the Featured Card - xsmall style size starter kit view mode.

When having media position at the end -- Featured Card - xsmall style size with Large gutters between

When having media position at the end -- Featured Card - xsmall style size with Small start gutters between

When having media position at the end -- Featured Card - xsmall style size with Small end gutters between

When having media position at the end -- Featured Card - xsmall style size with No Gutter gutters between

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3377004 by Ahmad Abbad : Fixed spacing between columns for Featured Card with better Gutters Between prop and support Card Border with bordered
🐛 Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

🇯🇴Jordan ahmad abbad Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024