Cordial for Blocs
versatile layout that fits any project
❖ Cordial Core Widget: HTML footer widgets with special classes for navigation and more
✓ Add a custom SVG cursor to images or DIVs (on desktop )
✓ Experimental feature: Apply parallax to header video via additional JS
✓ Improved CSS for Animation
︙Extra pages: Terms (link in footer) + Privacy page (link in the cookie panel and footer)
cordial Page Label widget
A lightweight breadcrumb-style indicator that displays the current page and its parent section, if any. Add your own text to the element, the script will append the active page info automatically, so each page can have its own custom prefix, you can apply any text style.
Example below: Type: Heading 4, 'CordialPage Label' (custom text) + / + render current page name
Cordial Page Label
Menu Widget
⚠︎ This is a widget provided separately, as some of its features may be included in the core program by default in the future.
✓ Automatically opens submenus when you hover your mouse over the desktop navigation
✓ Highlights the current page in the parent menu for easy navigation (using the project class nav-active-link)
✓ Opens sub-menus on mobile when the current page is loaded
Class naming
Class prefixes
Using prefixes makes it easier to find and organize classes
Prefix classes
All manually created classes use the prefix ‘cordial-‘ to separate them from Blocs-generated classes
Nav class naming:
All custom classes that are used in pages have the prefix ‘cordial-nav-'
Standard Nav Classes
Desktop Navigation
nav-link
Standard color, set color (normal & Hover) only here to keep link active color properly
navbar-nav li a
Large font size on desktop, medium size on mobile
ⓘ Class also managed via Project Settings / Typography / Navigation Link
nav .dropdown-menu a.nav-link
Second-level links style and color
nav .dropdown-menu
Responsive menu styling
menu .nav-active-link (active link)
Nav Classes
cordial-menu-top-fixed, .cordial-nav-position-on-mobile
Setting Menu on desktop and mobile
cordial-menu-right-icons, cordial-menu-side-button, cordial-menu-logo
Position and fixed width of side columns
cordial-nav-toggle-position, cordial-nav-toggle-button, cordial-nav-toggle-button-text
Button-style ‘menu' next to the responsive menu toggle icon
nav-link, .navbar-nav li a, nav .dropdown-menu, nav .dropdown-menu a.nav-link
Navigation text color, menu and sub-menu
nav-active-link
Active link color in Main navigation
ⓘ Class is managed in Project Settings / Active Link Class
cordial Classes
cordial-font-cordial-regular, cordial-font-procherry, cordial-font-inline, font-montserrat-medium, font-montserrat-bold, font-raleway-bold
Extra Font Classes
cordial-header-content, cordial-header-variavle-height-vh, cordial-header-variavle-height-screen-full, cordial-header-spinner, cordial-header-demo-icons
Header elements position and style
cordial-image-overlay, cordial-header-overlay-gradient, cordial-overlay-with-link
Extra overlay for images
cordial-bar-chart-vertical-wrapper, cordial-price-box-colors, cordial-bar-chart-horizontal-70percent, cordial-bar-chart-vertical-style…..
Animated chart, colors and text style
cordial-team-card-text, cordial-team-card-img, cordial-team-card, cordial-team-card-box-img
Team Page classes
cordial-image-hover-grow, cordial-image-hover-reduce, cordial-portfolio-image-grow, cordial-box-shadow
Image animations and style
cordial-price-list-icons-no, cordial-price-box-colors
Prices box style (with text color animation)
cordial-text-shadow, cordial-box-shadow / inner-shadow
Add shadow to text and elements
Footer Navigation
Inherit colors from the desktop Navigation (nav-link)
cordial-footer-menu, cordial-footer-menu a
General Classes
position-relative
Position value applied to a parent element so that child elements with position: absolute are positioned relative to that parent instead of the entire page.
position-absolute
Position value that positions an element relative to nearest positioned parent
overflow-hidden
Utility class that hides content outside the container boundaries
text-decoration-none
Disable underline in links
z-index-0
Sets stacking order to 0. Elements with higher values (z-index: 1, 2, 3, etc.) appear in front of elements with lower values.
Note: Additional custom classes may also be present, typically with clear and logical names that make their purpose easy to understand
ⓘ Blocs Classes
⨁ nav-active-link, navbar-nav li a, nav .dropdown-menu, nav .dropdown-menu a.nav-link etc
Standard navigation and responsive menu
⨁ d-bloc .card, .l-bloc
Default text color
⨁ cc-link, cc-btn, cc-window
Cookie Consent - Bric Styke
⨁ scrollToTop & scroll-to-top-btn-icon
Back to Top - Buttons Style
⨁ dropdown-menu
Background and border style
⨁ modal, modal-content, modal-backdrop.show
Edit styles & Lightbox Overlay color and opacity
⨁ scrollToTop + scroll-to-top-btn-icon
Back to top Button Style
⨁ page-scroll-progress-bar
Control position and add gradient background
⚠︎ Note: These classes are active, even if they may show a value of "0" in the list
⨁ tooltip-inner
Tooltip Style, background and text.
⚠︎ Note: The arrow color is managed in Cordial Core Widget, Blocs does not handle border color individually.
Classes beyond the Blocs standard with PRO Classes
CSS in ‘cordial Core Script’, advanced CSS code with manual settings to offer custom creative solutions.
💎 Pro Class cordial-cursor-crosshair 𖦏
Custom SVG cursors for images and div with CSS Media queries to show SVG only on desktop (>1025px)
💎 Pro Class cordial-page-label-widget (Breadcrumb navigation lite)
💎 Pro Class cordial-header-video-parallax Apply parallax to header video (Experimental feature)
⚙️ a:focus
Remove Gray Highlight first link Safari in modal window
⚙️ page-container
In some cases it is required for the parent DIV of a Sticky element
⚠︎ Note: These classes in Blocs do not contain any settings, their code is defined in the script
ⓘ Keep in mind
🔐 Locked Classes
Some classes are locked because modifying them is not recommended. If you choose to edit them, be aware and do so at your own risk.
⚠︎ Required Classes
All classes made of multiple parts, like .class a or .class.active, are visible in the class list but aren’t directly attached to any single element. These classes are required, even if they appear as "0" in the list.
ⓘ Editing Classes across layouts
When editing a class, it’s important to check its settings in all 4 layouts (desktop, laptop, tablet, and phone), because a class can have different properties in different layouts. It often happens with padding, margin, and sizes; it can also be used for visibility classes, to show or hide elements (Visibility toggle options)
✎ Testing Class edits safely
If you’re unsure about modifying classes, make progressive copies of the project so you can always revert to a correct version.