Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
Having no style and no component for the Bootstrap Callout style in CKEditor 5
Proposed resolution
- Add a new component called Callout
- Use the custom
.bs-calloutCSS class to stand for Bootstrap Callout and be isolated from.callout
Callout styles - Left to right (LTR)
Callout styles - Right to left (LTR)
Callout with styling options
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
- ➖ UX/UI designer responsibilities
- ➖ 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.1, varbase_components-2.0.4
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
Storybook page for the Callout component
API changes
- N/A
Data model changes
- N/A
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #18 | Varbase-Components-Molecules-Callout-Docs-⋅-Storybook.png | 541.85 KB | rajab natshah |
| #12 | Callout-styles--RTL.png | 33.17 KB | rajab natshah |
| #12 | Callout-styles--LTR.png | 30.58 KB | rajab natshah |
| #10 | Components-·-Bootstrap-v5-3.png | 41.38 KB | rajab natshah |
| bs-callout.png | 26.56 KB | n.ghunaim |
Issue fork varbase_components-3461722
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #3
n.ghunaim commentedComment #4
rajab natshahComment #5
rajab natshahComment #6
rajab natshahLet us add a stories for the bs-callout component in Varbase Storybook
Comment #7
n.ghunaim commentedComment #8
rajab natshahComment #9
rajab natshahComment #10
rajab natshah➖ UX/UI designer responsibilities
Better to check with the design team to
add Callout component to the public Varbase Design System
I see a Bootstrap 4 styling and logic not Bootstrap 5 styling
By the way the Callout is a custom example.. It is not ready out of the box in Bootstrap 5
https://getbootstrap.com/docs/5.3/customize/components/#creating-your-own
Bootstrap 5.3.3 suggest to have callout look like
Not as we had in Bootstrap 4
Some custom Design Systems are keeping the old BS4 in BS5 like
https://coreui.io/bootstrap/docs/components/callout/
For the history of this.
It was requested by Razem back in Vartheme BS4 to add the callout as a custom component to be used in CKEditor 4
Better to follow with the Bootstrap ~5.3 logic and methods.
Comment #11
n.ghunaim commentedComment #12
rajab natshahComment #14
rajab natshahComment #17
rajab natshahComment #18
rajab natshahComment #19
rajab natshahComment #20
rajab natshah✅ Released varbase_components-2.0.4
Comment #21
rajab natshahThe public link for the Callout stories
Comment #22
rajab natshahComment #23
rajab natshahComment #24
rajab natshahComment #25
rajab natshah✅ Released varbase-10.0.1