add variable
add variable
add variable
Intro to this template/changelog
This template is a "component library". It has multiple variants of layout-styles for different sections. Always duplicate the section you want to edit (the little blue copy-button you see when an element is selected). As a rule, you should not to edit any structure, except for deleting/hiding those you don't need.
These are the main things you should edit:
- copy, background, border colours
- button styling
- typeface & font
- images
- icons
- animations (see confluence)
You can use the Layers Panel to hide objects you might need later.
More documentation on Confluence https://talentech-docs.atlassian.net/wiki/x/CQCs1Q
Animated box – see it in preview
Changelog
- order of components changed
- simplified component examples with multiple variants in one section
- added list with image
- advanced even-odd list
- tweaks of containers padding, so that it is possible to select them
- cleaner container alignment
- hover animations
- object animations
- scroll animations
Animations
Hover animation
Object animation
Scroll animation
Buttons
Social media
List
Icon

Round image

Square image
Emoji
List, advanced with even-odd
Title

Title
Title
Text
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui orem eum fugiat quo voluptas nulla pariatur?
Heading 3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque lauduia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni doloreui dolorem eum fugiat quo voluptas nulla pariatur?
· I am a bullet
· I am a bullet
· I am a bullet
Heading 4 – text content align left
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto btiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Image TC (top center)

Cards 1, basic
Find the card closest to your need. Delete or duplicate "col" as needed. Set grid/wrap behaviour with row-cols-x-x
I am a card example

I am a card example
Heading 3
Heading 3
Heading 3
Heading 3
Heading 3
Heading 3
Heading 3
Cards 5, image float left/right
Wrap center. Delete or duplicate "col" as needed. Set grid/wrap behaviour with row-cols-x-x
Image left

Image right

Cards 2, background images
Resize viewport to see image scaling behaviour. Delete or duplicate "col" as needed. Set grid/wrap behaviour with row-cols-x-x
Heading 3
Heading 3
Heading 3
Cards 3, ⚠️horizontal scroll⚠️
Delete or duplicate "col" as needed. Set width of cols individually with col-x-x

Heading 3

Heading 3

Heading 3
Cards 4, image gallery
Wraps center. Delete or duplicate "col" as needed. Set grid/wrap behaviour with row-cols-x-x






Zig-zag

Heading 3
Heading 3

Heading 3


Heading 3
Text + image left, vertical center
Heading 3

Text + image right, vertical center
Heading 3

Text + image left, text align top

Heading 3
Text + image right, text align top
Heading 3

Carousel auto slide
Speed of sliding set in Settings > Attribute "data-bs-interval" (milliseconds). Ask Bente! you'll need some help here.
Video
Gobi collection
Gobi collections are created and styled in the customer's Gobi account. Use the code generated there and paste into Settings.
Gobi, single w cards
Delete or duplicate "col" as needed. Set card grid/wrap behaviour with row-cols-x-x
Heading 3
Heading 3
Heading 3
Heading 3
Card group with image
Delete or duplicate "col" as needed. Set card grid/wrap behaviour with row-cols-x-x



