Recent Changes
- All snippet prefixes have been standardized to the new convention (e.g., add-css-, add-js-, add-font-, add-slider-, add-plp-*, etc.) for consistency and easier discovery. This affects all categories: CSS, JS, fonts, layout, markup, PLP, and sliders.
- The growy slider snippet prefix is now 'add-slider-growy'.
- All
$staticlink$ references are now double-escaped as \\$staticlink\\$ in all snippet bodies and attributes for correct literal output.
- All logo
<img> tags now use both rlc-image and rlc-logo classes together (class="rlc-image rlc-logo" ).
- All snippets comply with RL Creative CSS class rules for titles, colors, brands, and alignment.
- Any previous changes that removed
rlc-image from <img> tags have been reverted; both classes are present where needed.
- All
data-images and srcset attributes use the double-escaped format for $staticlink$ .
- New snippet:
addCSSlooppause — CSS for looppause button without circular border.
Once installed. Type add into a HTML file to see usable snippets
Usable snippets
CSS files
trigger |
description |
add-css-creative |
creative_v3 CSS file |
add-css-stickynavexp |
stickynav exp CSS file |
add-css-stickynav |
stickynav CSS file |
add-css-productfeed |
productfeed stock CSS file |
add-css-copyalignment |
copy alignment CSS file |
add-css-cardstack |
cardstack CSS file |
add-css-ingrid |
ingrid CSS file |
add-css-fadeslider |
fadeslider CSS file |
add-css-shell |
inline css style element including breakpoints |
add-css-looppause |
CSS for looppause button without circular border |
JS files
trigger |
description |
add-js-creative |
creative JS file |
add-js-loader |
JSloader markup to include gsap, scrolltrigger and customJS |
add-js-fadeslider |
fadeslider JS file |
add-js-cardstack |
cardstack JS file |
add-js-stickynavexp |
stickynav exp JS file |
add-js-stickynav |
stickynav JS file |
add-js-custom |
custom JS file |
Content/Layout/Markup
trigger |
description |
add-shell |
page shell including starter CSS styles and creative_v3 wrapper element |
add-hero |
hero markup including video and textgroup |
add-banner |
standard markup for most banners includes wrapper, imagery, textgroup, standard CSS shell |
add-bannerproduct |
standard banner with productfeed markup |
add-imagery |
imagery markup with picture tag |
add-picture |
picture tag markup |
add-video |
videocontainer markup |
add-foreground |
foreground wrapper, includes imagery markup |
add-background |
background markup with picture tag |
add-hotspot |
hotspot link markup |
add-copygroup |
copygroup markup with title, dek and CTA |
add-textgroup |
textgroup markup with title, dek and CTA |
add-title |
title header tag |
add-dek |
dek div |
add-links |
links markup including linecta |
add-include |
asset include |
add-cardstack |
cardstack slider markup |
add-fadeslider |
fade slider markup |
add-growyslider |
growy slider markup |
add-quickshoptarget |
quickshop + icon target |
add-signature |
signature markup, styles, file references |
add-scrollto |
scrollto arrow markup and styles |
add-pillbutton |
pillbutton markup and styles |
Sliders
trigger |
description |
add-slider-fadeslider |
fade slider markup |
add-slider-growy |
growy slider markup |
add-slider-buckets |
buckets slider markup (rlc-three__m_carousel) |
add-slider-category |
category slider markup (rlc-category_carousel) |
add-slider-banner |
banner slider markup (rlc-banner) |
add-slider-freescroll |
freescroll slider markup (rlc-freescroll) |
add-slider-autoslider |
autoslider slider markup (rlc-autoslider) |
Productfeed/templates
trigger |
description |
add-producttemplate |
productfeed template |
add-productfeed |
productfeed |
add-cardstacktemplate |
cardstack slide productfeed template |
PLP
trigger |
description |
add-plp-wrapper |
PLP in-grid wrapper |
add-plp-1x1 |
PLP 1x1 in-grid |
add-plp-moodbanner |
PLP Mood Banner |
Font files
trigger |
description |
add-font-creative |
Creative fonts |
add-font-reduced |
Didot, Sackers, Fenice |
add-font-sackers |
Sackers Font |
add-font-northwell |
Northwell Font |
add-font-rrl |
RRL fonts |
General brand CSS
trigger |
description |
add-menspoloCSS |
Mens Polo - generic styling for fonts, colors, elements |
add-purplelabelCSS |
Purple Label - generic styling for fonts, colors, elements |
add-collectionCSS |
Collection - generic styling for fonts, colors, elements |
add-womenspoloCSS |
Womens Polo - generic styling for fonts, colors, elements |
💡 Feel free to recommend/supply me with templates, pieces of code you use frequently or any possible enhancement recommendations!
| |