hg-col-12
hg-col-1
hg-col-11
hg-col-2
hg-col-10
hg-col-3
hg-col-9
hg-col-4
hg-col-8
hg-col-5
hg-col-7
hg-col-6
hg-col-6
hg-col-12
hg-col-6
hg-col-6
hg-col-12
hg-col-6
hg-col-6
hg-col-12
hg-col-6
hg-col-6
hg-col-12
hg-col-6
hg-col-6
hg-col-12
hg-col-6
hg-col-6
hg-col-12
hg-col-6
hg-col-6
hg-col-12
hg-col-6
hg-col-6
container-fluid
container-xxl
container-xl
container-lg
container-md
container-sm
col 1 to col 6
hg-col-1 hg-col-sm-2 hg-col-md-3 hg-col-lg-4 hg-col-xl-5 hg-col-xxl-6
col 11 to col 6
hg-col-11 hg-col-sm-10 hg-col-md-9 hg-col-lg-8 hg-col-xl-7 hg-col-xxl-6
col media example
hg-col-12 hg-col-md-6 hg-col-lg-3 hg-col-xl-4
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col-2
md-auto
col-2
xl-auto
col-2
lg-auto
col
md-2
col
xl-2
col
lg-2
Can add the class .hg-button-big if u want a 100% width button
Nullam velit est, eleifend ut convallis a, rhoncus non velit. Donec convallis mi diam, nec pharetra nisl ullamcorper mattis. Duis erat augue, malesuada non augue in, pulvinar molestie odio. Morbi eget congue nibh. Nunc tristique nibh eget mi sagittis interdum. Fusce egestas lacus id leo pulvinar, quis malesuada massa iaculis. Cras at aliquam est, et mattis quam. Nullam accumsan tincidunt erat, sit amet bibendum metus. Etiam sed hendrerit dolor, eget commodo metus. Phasellus ex ex, ultrices eget hendrerit vitae, iaculis at nunc. Maecenas finibus odio non gravida lobortis. Duis nec justo ligula. Sed et condimentum sem, eu semper tellus. Cras ex dui, lacinia vel sollicitudin at, hendrerit eget eros. Aliquam neque dui, condimentum nec nibh sit amet, hendrerit rhoncus nulla.
| title 1 | title 2 | title 3 | title 4 |
|---|---|---|---|
| Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nisi ut nisl venenatis mollis. Cras sit amet orci faucibus, varius nisl sit amet, eleifend lacus. Nunc egestas tincidunt dui. Pellentesque ornare ullamcorper diam non egestas. Ut ultrices vitae odio et hendrerit. Suspendisse imperdiet dapibus neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id arcu arcu. Suspendisse et nulla quis dolor suscipit eleifend quis quis arcu.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Fusce finibus, nulla et mollis cursus, libero nisl rutrum nisl, lobortis fringilla tellus neque a nibh. Sed auctor risus et volutpat pharetra. Phasellus blandit congue nisl, sit amet sodales elit bibendum a. Phasellus posuere sem id semper semper. Cras at purus vel libero iaculis pulvinar ut eu quam. Cras pharetra non justo ut gravida. Quisque faucibus urna risus, in congue arcu facilisis mollis. Praesent nisl ex, maximus pharetra erat at, lobortis feugiat mauris. Sed vestibulum neque eu eros pretium luctus. Aliquam erat volutpat. Maecenas sollicitudin tortor sit amet nibh ultricies rutrum. Quisque dui velit, convallis eu sapien in, luctus consectetur libero. Sed iaculis elit ut ipsum ultricies, id bibendum nibh posuere. Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus. Aliquam erat volutpat.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Morbi sodales bibendum mauris. Donec id bibendum neque, eu laoreet metus. Maecenas elementum dignissim purus, a aliquam nisl ullamcorper vel. Phasellus euismod consequat leo sit amet commodo. Duis maximus diam et tristique molestie. Aenean ipsum mauris, auctor dignissim lobortis nec, cursus eget justo. Etiam bibendum augue sit amet tortor aliquam, eu auctor ipsum condimentum. Vestibulum at magna a mauris finibus mollis non a sapien. Aliquam ut convallis enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed justo est, molestie quis odio non, pretium vehicula risus. Curabitur dictum diam vel ornare aliquam. Fusce vestibulum, nisl non dapibus accumsan, nisi quam eleifend sapien, at interdum arcu nisl eu urna. Quisque maximus et eros vitae bibendum. Aliquam a finibus enim.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Fusce finibus, nulla et mollis cursus, libero nisl rutrum nisl, lobortis fringilla tellus neque a nibh. Sed auctor risus et volutpat pharetra. Phasellus blandit congue nisl, sit amet sodales elit bibendum a. Phasellus posuere sem id semper semper. Cras at purus vel libero iaculis pulvinar ut eu quam. Cras pharetra non justo ut gravida. Quisque faucibus urna risus, in congue arcu facilisis mollis. Praesent nisl ex, maximus pharetra erat at, lobortis feugiat mauris. Sed vestibulum neque eu eros pretium luctus. Aliquam erat volutpat. Maecenas sollicitudin tortor sit amet nibh ultricies rutrum. Quisque dui velit, convallis eu sapien in, luctus consectetur libero. Sed iaculis elit ut ipsum ultricies, id bibendum nibh posuere. Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus. Aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nisi ut nisl venenatis mollis. Cras sit amet orci faucibus, varius nisl sit amet, eleifend lacus. Nunc egestas tincidunt dui. Pellentesque ornare ullamcorper diam non egestas. Ut ultrices vitae odio et hendrerit. Suspendisse imperdiet dapibus neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse id arcu arcu. Suspendisse et nulla quis dolor suscipit eleifend quis quis arcu.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Fusce finibus, nulla et mollis cursus, libero nisl rutrum nisl, lobortis fringilla tellus neque a nibh. Sed auctor risus et volutpat pharetra. Phasellus blandit congue nisl, sit amet sodales elit bibendum a. Phasellus posuere sem id semper semper. Cras at purus vel libero iaculis pulvinar ut eu quam. Cras pharetra non justo ut gravida. Quisque faucibus urna risus, in congue arcu facilisis mollis. Praesent nisl ex, maximus pharetra erat at, lobortis feugiat mauris. Sed vestibulum neque eu eros pretium luctus. Aliquam erat volutpat. Maecenas sollicitudin tortor sit amet nibh ultricies rutrum. Quisque dui velit, convallis eu sapien in, luctus consectetur libero. Sed iaculis elit ut ipsum ultricies, id bibendum nibh posuere. Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus. Aliquam erat volutpat.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Morbi sodales bibendum mauris. Donec id bibendum neque, eu laoreet metus. Maecenas elementum dignissim purus, a aliquam nisl ullamcorper vel. Phasellus euismod consequat leo sit amet commodo. Duis maximus diam et tristique molestie. Aenean ipsum mauris, auctor dignissim lobortis nec, cursus eget justo. Etiam bibendum augue sit amet tortor aliquam, eu auctor ipsum condimentum. Vestibulum at magna a mauris finibus mollis non a sapien. Aliquam ut convallis enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed justo est, molestie quis odio non, pretium vehicula risus. Curabitur dictum diam vel ornare aliquam. Fusce vestibulum, nisl non dapibus accumsan, nisi quam eleifend sapien, at interdum arcu nisl eu urna. Quisque maximus et eros vitae bibendum. Aliquam a finibus enim.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac. Suspendisse lectus erat, convallis sit amet sapien at, rhoncus viverra quam. Cras a pretium dolor. Vivamus eget urna mi. Donec convallis lorem sit amet ipsum fringilla, non hendrerit nulla congue. Phasellus quam velit, finibus eget blandit ut, vestibulum eget sapien. In porta ante vitae lectus malesuada vestibulum. Phasellus rutrum tristique sem, eu vulputate augue sagittis vitae. Mauris et ultricies arcu.
Fusce finibus, nulla et mollis cursus, libero nisl rutrum nisl, lobortis fringilla tellus neque a nibh. Sed auctor risus et volutpat pharetra. Phasellus blandit congue nisl, sit amet sodales elit bibendum a. Phasellus posuere sem id semper semper. Cras at purus vel libero iaculis pulvinar ut eu quam. Cras pharetra non justo ut gravida. Quisque faucibus urna risus, in congue arcu facilisis mollis. Praesent nisl ex, maximus pharetra erat at, lobortis feugiat mauris. Sed vestibulum neque eu eros pretium luctus. Aliquam erat volutpat. Maecenas sollicitudin tortor sit amet nibh ultricies rutrum. Quisque dui velit, convallis eu sapien in, luctus consectetur libero. Sed iaculis elit ut ipsum ultricies, id bibendum nibh posuere. Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus. Aliquam erat volutpat.
Cras sit amet orci faucibus, varius nisl sit amet, eleifend lacus.
Quisque dui velit, convallis eu sapien in, luctus consectetur libero. Sed iaculis elit ut ipsum ultricies, id bibendum nibh posuere. Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac.
Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus. Aliquam erat volutpat.
Cras sit amet orci faucibus, varius nisl sit amet, eleifend lacus.
Quisque dui velit, convallis eu sapien in, luctus consectetur libero. Sed iaculis elit ut ipsum ultricies, id bibendum nibh posuere. Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus.
Phasellus ullamcorper ante enim, ut dignissim ante luctus ac.
Mauris lacinia metus quis ex suscipit, dapibus cursus lacus faucibus. Aliquam erat volutpat.
Can include the slider inside a col to make it the size of your choice
You can add the class slider-auto-move and every 5 seconds the image change
Just add hg-gallery-sm class on hg-gallery
Just add hg-gallery-xl class on hg-gallery
hg-text-start
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis semper eros nec dignissim. Curabitur volutpat, est feugiat blandit rutrum, urna sapien semper velit, eu finibus leo odio a dolor.
hg-text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis semper eros nec dignissim. Curabitur volutpat, est feugiat blandit rutrum, urna sapien semper velit, eu finibus leo odio a dolor.
hg-text-end
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis semper eros nec dignissim. Curabitur volutpat, est feugiat blandit rutrum, urna sapien semper velit, eu finibus leo odio a dolor.
hg-text-justify
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis semper eros nec dignissim. Curabitur volutpat, est feugiat blandit rutrum, urna sapien semper velit, eu finibus leo odio a dolor.
Text with class hg-f-normal (400)
Text with class hg-f-thin (300)
Text with class hg-f-bold (600)
Text with class hg-f-italic
Text with class hg-text-decoration-underline
Text with class hg-text-decoration-line-through
Text with class hg-text-decoration-none
Text with class hg-text-uppercase
Text with class hg-text-lowercase
Text with class hg-text-capitalize
hg-position-relative
hg-position-absolute
hg-position-fixed
hg-position-static
hg-position-sticky
Position absolute with % on a position rlative container
Can be combined to obtain the desired result
hg-top-0
hg-top-25
hg-top-50
hg-top-75
hg-top-100
hg-bottom-0
hg-bottom-25
hg-bottom-50
hg-bottom-75
hg-bottom-100
hg-right-0
hg-right-25
hg-right-50
hg-right-75
hg-right-100
hg-left-0
hg-left-25
hg-left-50
hg-left-75
hg-left-100
Use this classes on a flex container(hg-d-flex)
Can change de directions width this classes
hg-flex-row
hg-flex-row-reverse
hg-flex-column
hg-flex-column-reverse
And hg-nowrap is for nowrap the flex
hg-p-* is for padding, hg-m-* is for margin
hg-p-0 / hg-m-0 : 0rem
hg-p-1 / hg-m-1 : 0.5rem
hg-p-2 / hg-m-2 : 1rem
hg-p-3 / hg-m-3 : 1.5rem
hg-p-4 / hg-m-4 : 2rem
hg-p-5 / hg-m-5 : 2.5rem
hg-p-6 / hg-m-6 : 3rem
dierction od margin or padding
hg-pt-* / hg-mt-* : top
hg-pe-* / hg-me-* : right
hg-pb-* / hg-mb-* : bottom
hg-ps-* / hg-ms-* : left
hg-py-* / hg-my-* : vertical
hg-px-* / hg-mx-* : horizontal
With margin we can use auto to center or position the elements
top, bottom and vertical just work if the container is flex
hg-d-flex
hg-d-block
hg-d-inline
hg-d-inline-block
hg-d-none
Border radius
This symbol have class hg-align-top
✦This symbol have class hg-align-middle
✦This symbol have class hg-align-bottom
✦This symbol have class hg-align-text-top
✦This symbol have class hg-align-text-bottom
✦hg-overflow-hidden
hg-overflow-visible
hg-overflow-scroll
Order 1 to 10
hg-order-1
hg-order-10
The code of a simple menu
The menu link have a test of menu and submenu
to make it easier to see, I have put the importnat classes in bold
We have 2 diferents menus but with the similar structure:
A classic menu with navbar with links and in mobile a burger menu
<div class="hg-menu hg-shadow">
<div class="hg-container-fluid hg-p-0 hg-m-0">
<div class="hg-row">
<div class="hg-col-3 hg-my-auto hg-d-md-none">
<div class="hg-burger">
<span></span>
</div>
</div>
<div class="hg-col-6 hg-col-md-2 hg-my-auto hg-mx-auto hg-menu-logo">
<a href="" class="hg-p-0 hg-my-auto"><img class="hg-p-0 hg-m-0 hg-mx-auto" src="img/logos/main-logo.png"></a>
</div>
<div class="hg-col-3 hg-d-md-none"></div>
<ul class="hg-nav hg-col-md-10">
<li><a class="hg-link" href="">Nav 1</a></li>
<li><a class="hg-link" href="">Nav 2</a></li>
<li><a class="hg-link" href="">Nav 3</a></li>
<li class="hg-submenu-link"><a class="hg-link hg-submenu-link" href="">Nav 4</a>
<ul class="hg-submenu">
<li><a class="hg-link" href="">Example 1</a></li>
<li><a class="hg-link" href="">Example 2</a></li>
<li><a class="hg-link" href="">Example 3</a></li>
<li class="hg-submenu2-link"><a class="hg-link hg-submenu2-link" href="">Example 4</a>
<ul class="hg-submenu2">
<li><a class="hg-link" href="">Example 1</a></li>
<li><a class="hg-link" href="">Example 2</a></li>
<li><a class="hg-link" href="">Example 3</a></li>
<li><a class="hg-link" href="">Example 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="hg-link" href="">Nav 5</a></li>
</ul>
</div>
</div>
</div>
A simple menu with burger all time
For this menu just need add hg-menu-burger class and put nav out of bar menu container
<div class=" hg-menu hg-menu-burger hg-shadow-sm hg-bg-white hg-p-0">
<div class="hg-container hg-p-0 hg-my-0">
<div class="hg-row">
<div class="hg-col-3 hg-col-md-4 hg-d-flex hg-align-center">
<a href=""> tel / e-mail</a>
</div>
<div class="hg-col-6 hg-col-md-4 hg-menu-logo">
<a href="" class="hg-p-0 hg-my-auto"><img class="hg-mx-auto" src="img/logos/main-logo.png" /></a>
</div>
<div class="hg-col-3 hg-col-md-4 hg-d-flex hg-align-center">
<div class="hg-burger hg-ms-auto">
<span></span>
</div>
</div>
</div>
</div>
<nav class="hg-nav hg-pt-4">
<ul>
<li><a class="hg-link" href="">Nav 1</a></li>
<li><a class="hg-link" href="">Nav 2</a></li>
<li><a class="hg-link" href="">Nav 3</a></li>
<li class="hg-submenu-link"><a class="hg-link hg-submenu-link" href="">Nav 4</a>
<ul class="hg-submenu">
<li><a class="hg-link" href="">Example 1</a></li>
<li><a class="hg-link" href="">Example 2</a></li>
<li><a class="hg-link" href="">Example 3</a></li>
<li class="hg-submenu2-link"><a class="hg-link hg-submenu2-link" href="">Example 4</a>
<ul class="hg-submenu2">
<li><a class="hg-link" href="">Example 1</a></li>
<li><a class="hg-link" href="">Example 2</a></li>
<li><a class="hg-link" href="">Example 3</a></li>
<li><a class="hg-link" href="">Example 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="hg-link" href="">Nav 5</a></li>
</ul>
</nav>
</div>
Just put the image on a div with class .hg-im-container, you can add this class on a col too.
All media queries have the option sm, md, lg, xl and xxl
On this examples we use md but can be replaced for the others options
All columns have media queries with this method:
.hg-col-md-*
All margin and padding options have media queries with this method:
.hg-p-md-* / .hg-m-md-*
Typography options have media queries with this method:
.hg-text-md-* / .hg-f-md-* / .hg-text-decoration-md-*
Display options have media queries with this method:
.hg-d-md-*
flex options have media queries with this method:
.hg-flex-md-* / .hg-justify-md-* / .hg-align-md-*
Position options have media queries with this method:
.hg-position-md-*
Overflow options have media queries with this method:
.hg-overflow-md-*
Element fixed