All the Lightning UI Building blocs

Headings

All the headings (from H1 to H3) are styled to be easily seen and catch the eye. If you need them to stand out even more, you can simple add the "accent" class to them, you'll unlock a nice little animation, with a conceptually stylized lightning floating next to them !

Oh, and did I mention that you can align them however you want ? They're aligned left by default, but if you add the "centered" class to them, they'll place themselves right in the middle ! - Pro tip : Try out the "alignedRight" class as well

Text

Of course, we have some text to offer ! And some pretty cool one, that is ! All the links you add are stylized and have neat little animation on hover, so you can't miss them ! Wanna draw the eyes towards some specific words ? Just put them between "span" tags and they'll get bold and italic so they can stand out ! - Oh and no need to add classes, this comes standard. Pretty nice, isn't it ?

Content blocs

Lightning UI comes loaded with various content blocs and layouts to use and personnalize to you every needs ! So don't forget to mess with those blocks to discover their full potential !

Those blocs are all based on grid, for a robust layout and easy responsive adaptation

Blog posts

This library also includes a pretty neat and efficient dynamic blogging system. All the content is based on an array of object in its own file. Just add a div with the class of "blogPostCollection" to your page and link your js file containing the blog posts' data and the main js file will do the work for you.

The component in itself is based on the details/summary HTML5 tag, click on the summary text to unveil the whole content. No JS, everything's managed by the browser thanks to the HTML tag itself.

CTAs

Of course, a good website wouldn't be complete with some CTAs, we have two variants To access the other variant, just add the "simpler" class to them - second row of CTAs. They're fully animated and really stand out - I'm actually really proud of how they look.

Left aligned CTA Centered CTA Right aligned CTA Left aligned CTA Centered CTA Right aligned CTA

Special blocks

Maybe you've noticed that I didn't mention any fundamental UI element yet. Now's the time to tell you about those blocks. Header, Footer, Carousel, Overlays.

When it comes to the header, it's pretty straight forward, yet appealing and pure eye candy. It rocks a simple yet effective layout with on the right, the logo and brand name (and catchphrase !), and on the left, a stylish list of tilted, clearly separated navlinks, followed by a beautiful CTA. And it also gets opaque on scroll, so it doesn't goes across all the amazing content below it.

The dark/light mode selector comes standard as well, fully managed by JS, so you don't have to ! And, obviously, the navbar gets an hamburger menu layout on smaller devices, so that's another thing taken care of for you !

The footer you can see right below is fairly simple, logo + brand name on the left, navlinks on the right, they stack up on smaller devices. It's as straightforward as it gets.

Maybe you've noticed it - if you didn't, there's something wrong, but this library also includes carousels. They're auto-managed by JS so you're not overwhelmed with managing it yourself. No need to add indicators, it's automatically done, based on your slides. Add the "autoplay" class to it and JS will take care of making it slide for you, with classy entry animations. And to switch the layout of a slide, just add "reversed" to it, as easy as that !

Talking about animations, have you noticed the panning lightning in the background ? And the arrow animations that change when hovering on the CTAs ?

Finally, overlays. If you look at the bottom center of the page, you should see arrows, pointing upwards... try clicking on it, and be amazed by its animations while it brings you back to the top of the page ! It also represents an effective invitation to scrolling back down once you're back at the top. While scrolling through the page, it will always accompagny you, to let you know you can still scroll... Until the very end, when it'll tilt and let you know you've reach the bottom of the page.

This overlay is known by the "overflay" class, it's a block you can find at the top of the source code, with an SVG inside.

Try getting back up to the top and look on the bottom left corner, you should notice another overlay, which invites you to follow our social media. This one is pretty simple : it sticks to that place all the time, you can put any text you want and any social media link you want, or anything else, really, it's just there to use some extra space !

This overlay element is known by the "socials" class, which contains some text and two social media SVGs - I recommend sticking to the SVG format, as there's some style applied to them.