Changelog – delete this section
Changelog V8
- fixed card width and height issues for safari
- added a few more card options
- fixed gobi in card grid to shrink
- fixed circular images
- added a few more card options
- fixed gobi in card grid to shrink
- fixed circular images
Guidelines for creating templates for others' to use
when creating templates for other people to use, bear in mind they are not designers and developers:
- deeply nested divs needs to have paddings that make them easy to select
-- cols must be easy to select and duplicate
-- cards must be easily selectable (for them to add borders and backgrounds)
- divs must accomodate many variants of copy. potentially long or short headings, long or short words, lots of text, or just a little.
- deeply nested divs needs to have paddings that make them easy to select
-- cols must be easy to select and duplicate
-- cards must be easily selectable (for them to add borders and backgrounds)
- divs must accomodate many variants of copy. potentially long or short headings, long or short words, lots of text, or just a little.
🌸 Note: For standard css, use the style manager options. For adding classes, use only Bootstrap classes.
🌸 Tip: use .BODY-WRAP to set paddings for all sections
Notes
-⚠️ class-names in capital letters are not functional. They are purely to make the divs in the Layer-manager possible to identify. Therefore they appear first. No styling should be applied to them
-⚠️ some components are hand-crafted for specific content, marked with badge:
-⚠️ some components are hand-crafted for specific content, marked with badge:
crafted SECTION
Typography – changing globally
- Apply font to entire page: Select .BODY-WRAP. Apply your font. This will change all text to children of .BODY-WRAP unless there are overrides in the style manager.
- Heading scale. Headings should be sized proportionally, logically, and with rem. Our default scale is called The Major Second (1.125). To change this globally, you can find other scales in this scale generator and / or convert px to rem here. You can of course override these values for individual elements.
Change the new sizes in this code. Go to Custom code > CSS > scroll down to the bottom, and paste & save
h1, .h1 {
font-size: 3rem;
}
h2, .h2 {
font-size: 1.802rem;
}
h3, .h3 {
font-size: 1.602rem;
}
h4, .h4 {
font-size: 1.424rem;
}
h5, .h5 {
font-size: 1.266rem;
}
h6, .h6 {
font-size: 1rem;
font-weight: bold;
}
.card h3, .card h5 {
font-size: 1.266rem;
}
- Heading scale. Headings should be sized proportionally, logically, and with rem. Our default scale is called The Major Second (1.125). To change this globally, you can find other scales in this scale generator and / or convert px to rem here. You can of course override these values for individual elements.
Change the new sizes in this code. Go to Custom code > CSS > scroll down to the bottom, and paste & save
h1, .h1 {
font-size: 3rem;
}
h2, .h2 {
font-size: 1.802rem;
}
h3, .h3 {
font-size: 1.602rem;
}
h4, .h4 {
font-size: 1.424rem;
}
h5, .h5 {
font-size: 1.266rem;
}
h6, .h6 {
font-size: 1rem;
font-weight: bold;
}
.card h3, .card h5 {
font-size: 1.266rem;
}
🌸 Tip: you have to use the headings sequentially: you cannot skip a heading level (for ex having a H1, and then the next is H3). If you need a heading to LOOK like another, you can apply a class in the Style manager.
h1 .h1 Sed ut perspiciatis unde omnis iste natus error
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 ratione voluptatem seq
h2 .h2 Sed ut perspiciatis unde omnis iste natus error
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 ratione
voluptatem seq
h3 .h3 Sed ut perspiciatis unde omnis iste natus error
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 ratione
voluptatem seq
h4 .h4 Sed ut perspiciatis unde omnis iste natus error
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 ratione
voluptatem seq
h5 .h5 Sed ut perspiciatis unde omnis iste natus error
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 ratione
voluptatem seq
h6 .h6 Sed ut perspiciatis unde omnis iste natus error
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 ratione
voluptatem seq
Helper classes – delete this section
Animations
Fade in-out to background colour
Style manager > Extra
State:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
Hover:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
State:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
Hover:
Set background colour
+ transition: background-color. 0.6 sec. (speed)
Ease in-out
Advanced object animations
Made with Animate library – see Confluence
Scroll-triggered animations
Done with AOS library – see Confluence
Use Bootstrap classes shadow-sm shadow or shadow-lg. For hand-crafted shadows create with box shadow in Style Manager
shadow-sm
shadow
shadow-lg
Borders
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
🌸 Border radius: choose a class .border-1, .border-2, .border-3, .border-5, .border-5
⚠️ For custom borders on one, two, or three sides only:
- Style the element with desired border in the style manager
- add classes (for example) border-top-0 border-bottom-0 border-end-0
…this will give you the result like this box
- Style the element with desired border in the style manager
- add classes (for example) border-top-0 border-bottom-0 border-end-0
…this will give you the result like this box
More helper classes
See getbootstrap.com for more helper classes
OUR VALUES
Our values are based on three simple value concepts that will provide guidelines for how we want to act internally and externally. Together, they permeate everything that we do and help to clarify our identity and our goal, which is to ensure sustainable growth in the aquaculture of the future
build trust
Employees’ mandate to make their own decisions is crucial for an organization that is dependent on close customer relationships and quick actions. Trust creates a strong ScaleAQ team.
take responsibility
We take responsibility for both our own work and our collective responsibility for the environment. We create sustainable solutions that are based on insights from our customers and partners.
go beyond
We must dare to be clear, vigorous, curious, visionary and innovative on behalf of the entire aquaculture community. We will share our knowledge to make a difference in the aquaculture industry.
Pride in our roots. Strength for the future.
WE Grow Heritage roots our culture in the legacy of the companies within the ScaleAQ Group. It celebrates the experience, values, and pride that have shaped our journey and continue to guide us as we move forward.
Through WE Grow Heritage, we will:
Through WE Grow Heritage, we will:
- deepen our understanding of our history and heritage
- provide employees with insight into the traditions and values that have shaped who we are
- Provide employees with insight into the industry and its role in ensuring safe and secure workplaces
When we know where we come from, we stand stronger in who we are becoming!
One culture. One mindset. One direction.
WE Grow Culture strengthens our common culture across the ScaleAQ Group. It is where we bring our values to life through everyday behaviors, making culture something we do—not just something we describe.
Through WE Grow Culture, we will:
Through WE Grow Culture, we will:
- strengthen a common understanding of our culture and way of thinking
- translate our values into everyday behaviors through our six guiding principles
- support one another in our daily work
Confident and decisive leadership throughout the organization
WE Grow Leadership is ScaleAQ DNA’s dedicated leadership development program, designed to develop leaders who build trust, take responsibility, and create direction. The program strengthens leadership at all levels and equips leaders with the tools they need to make sound decisions in a growing and evolving organization.
WE Grow Leadership is based on the belief that strong leadership is a critical success factor in everything we aim to achieve. Our leaders are important culture carriers and role models, and we are committed to developing leaders who build trust, take responsibility, and create direction. We seek to strengthen leadership at every level and provide leaders with the tools they need to make sound decisions in an organization that is continuously evolving.
Through WE Grow Leadership, we will:
WE Grow Leadership is based on the belief that strong leadership is a critical success factor in everything we aim to achieve. Our leaders are important culture carriers and role models, and we are committed to developing leaders who build trust, take responsibility, and create direction. We seek to strengthen leadership at every level and provide leaders with the tools they need to make sound decisions in an organization that is continuously evolving.
Through WE Grow Leadership, we will:
- develop confident and decisive leadership
- equip leaders with the tools to build trust and take ownership
- strengthen decision-making across the organization
The right expertise. High quality. Reliable execution.
WE Grow Skills is designed to ensure that employees have the knowledge, skills, and capabilities needed to deliver high-quality results—today and in the future. It focuses on strengthening professional expertise while developing skills across functions and areas of expertise. Through training, learning opportunities, and continuous development, we help employees grow and succeed.
Through WE Grow Skills, we will:
Through WE Grow Skills, we will:
- promote professional growth across roles and areas of expertise
- provide practical tools that enhance quality, operations, and safety
- drive continuous improvement and stronger execution capability
The goal is to make it easier to do a good job—every day.
OUR GUIDING PRINCIPLES
- I deliver as agreed and help the customer succeed.
- I am generous and work well with others.
- I take ownership, act, and follow through.
- I contribute to safety, security, and well-being.
- I go the extra mile — with enthusiasm and good judgment.
- I am curious, dare to fail, learn, and share.
Sustainability in aquaculture
ScaleAQ Group integrates sustainability into every part of its business as a global technology partner to the aquaculture industry. With a strong focus on biology and environmental responsibility, we develop solutions that support sustainable growth and smarter operations across the industry.
Our ambition is to be a knowledge-driven advisor and long-term partner to our customers. That’s why our products are delivered with documentation, insights, and follow-up services that help improve efficiency, reporting, and information flow — enabling our customers to create greater value throughout the production cycle.
Our ambition is to be a knowledge-driven advisor and long-term partner to our customers. That’s why our products are delivered with documentation, insights, and follow-up services that help improve efficiency, reporting, and information flow — enabling our customers to create greater value throughout the production cycle.
Learn more
Buttons – delete this section
Intro
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 ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
crafted SECTION
{TITLE}
🌸 Tip: sidebar. Duplicate/remove .LIST-GROUP-ITEM
{AD_TEXT}
Details
Location
{LOCATION}
Department
{DEPARTMENT}
Application deadline
{APPLICATION_DEADLINE}
Job ID
{JOB_ID}
Category
{CATEGORY}
Salary range
{SALARY_RANGE}
Contact
{CONTACT_PERSONS}
Image center
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 ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Image floats
🌸 Tip: controlled by .float-start and .float-end
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 ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?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 ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
Zig-zag, vertical center align
🌸 Tip: duplicate .ZIG-ZAG-RIGHT-CENTER / .ZIG-ZAG-LEFT-CENTER
Image
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
Image
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
Zig-zag, vertical top align
🌸 Tip: duplicate .ZIG-ZAG-RIGHT-TOP / .ZIG-ZAG-LEFT-TOP
Image
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
Image
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
Card-grid, list
🌸 Tip: duplicate/remove .CARD-GRID-LIST-ITEM
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
🌸 Tip: increase / decrease rounded corners with .rounded-0, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5
⭐️
Emoji
sed ur
5
Number
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae a
Icon
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae a
Image
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 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
Image circle
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laue ipsa quae ab
illo inventore veritatis et quasi architecto beatae
Department for Administrative Affairs
Text
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo
Card-grid, basic
🌸 Tip: duplicate/remove .CARD-BASIC
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
Plain
Sed ur
Plain w footer
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
9
Number left
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
9
Number center
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
5
Number circle left
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
5
Number circle center
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
Icon circle left & footer
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo""Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo"
Icon circle center & footer
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo""Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo"
Image circle left & footer
Sed ur
Image circle center & footer
Sed ut perspiciatis unde omnis iste natus error sit volupta ab illo inventore veritatis et quasi architecto beatae vitaNOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus error sit volupta ab illo
Card image bottom
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Card image top & card footer
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Card-grid, overflows
🌸 Tip: duplicate/remove .CARD-OVERFLOW
🌸 Tip: use border-classes to add/remove borders: .border / .border-0
Overflow number circle 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 beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed qSed 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 q
Overflow number circle center
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Overflow text center
Sed ur
Overflow text left
Sed ut perspiciatis unde omnis iste natus
error sit volupta ab illo
inventore veritatis et quasi architecto beatae vitaNOTE: safari needs .d-flex .align-items-stretch on the .col for full
height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus
error sit volupta ab illo
Overflow icon circle center
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 q
Overflow icon circle left
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Overflow icon square center
Sed ur
Overflow icon square 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed q
Overflow image square center
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .cardSed ut perspiciatis unde omnis iste natus error sit volupta ab illo
inventore veritatis et quasi architecto beatae vita
Overflow image circle center
NOTE: safari needs .d-flex .align-items-stretch on the .col for full height and .w-100 on .card
Card-grid, overlays
🌸 Tip: overlays has to be on cards. See Bootstrap for doc
Card grid image gallery w captions
Figure caption
Figure caption
Figure caption
Figure caption
Card-grid, horizontal scroll ⚠️
🌸 Tip: .col- classes must be used to set width on the cards
🌸 Tip: duplicate / remove .CARD-BASIC
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
Card-title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
crafted SECTION
Card-grid, testimonials with video (HTML, Youtube, Vimeo)
🌸 Tip: duplicate / remove .CARD-BASIC
🌸 Info: portrait video format only
Sed ur
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
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
Sed ur
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
crafted SECTION
Gobi cards !higly custom!
⚠️ INFO. This section is highly custom for this scenario. It does NOT use a the grid (row-cols-…), only controlling width of cols with col-x-x. Be careful and check viewports. Do not move the Gobi vid, duplicate only.
🌸 Tip: duplicate / remove .CARD-BASIC or .CARD-GOBI
🌸 Info: portrait video format only
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 ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo"
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
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 ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
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,
Video and video grid (HTML, Youtube, Vimeo)
🌸 Tip: duplicate / delete .VID-GRID-ITEM
🌸 Tip: control video width with .row-cols- (for full-width, remove .row-cols-md-2)
Carousel
🌸 Info: slide speed set on each image
Previous
Next
Gobi collection
Generic button / external link
Trigger offcanvas (slide up)
Leaflet map
🌸 Tip: remove class cs-darkmap to display light map
crafted SECTION