PromptsCSS
Exploration

Layout

Filter by tag (one at a time).

Sticky sidebar
Only on Desktop

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Long content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section

Bloc 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section

Bloc 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section

Bloc 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section

Bloc 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section

Bloc 05

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section

Bloc 06

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section

Bloc 07

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section

Bloc 08

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tips

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
FreeSticky

Sticky sidebar

Create a sticky sidebar that stays visible on scroll.

Sticky header
Layout / Sticky
Sticky header
Section

Bloc 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section

Bloc 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section

Bloc 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section

Bloc 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section

Bloc 05

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section

Bloc 06

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section

Bloc 07

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

FreeSticky

Sticky header

Create a sticky header that remains visible while scrolling.

Sticky sections
Only on Desktop
Pinned panel

Section 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Filler
Content 01

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 02

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 03

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 04

This block is used to create height in the section. The panel above remains sticky while scrolling.

Pinned panel

Section 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Filler
Content 01

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 02

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 03

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 04

This block is used to create height in the section. The panel above remains sticky while scrolling.

Pinned panel

Section 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Filler
Content 01

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 02

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 03

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 04

This block is used to create height in the section. The panel above remains sticky while scrolling.

Pinned panel

Section 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Filler
Content 01

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 02

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 03

This block is used to create height in the section. The panel above remains sticky while scrolling.

Filler
Content 04

This block is used to create height in the section. The panel above remains sticky while scrolling.

FreeSticky

Sticky sections

Create sticky sections that remain fixed during scroll.

Fullscreen sections
Fullscreen section
01 / 04

Section 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fullscreen section
02 / 04

Section 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fullscreen section
03 / 04

Section 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fullscreen section
04 / 04

Section 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

FreeFullscreen

Fullscreen sections

Create fullscreen sections that fill the viewport.

Fullscreen hero

Fullscreen hero

A full-screen hero, readable on mobile, with touch-friendly CTAs.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

FreeFullscreen

Fullscreen hero

Create a fullscreen hero section.

Responsive grid
col-span

Featured

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
base

Card 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
mobile

Card 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
breakpoints

Card 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
spacing

Card 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
style

Card 05

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
content

Card 06

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
reusable

Card 07

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
css-grid

Card 08

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
tips

Card 09

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
ux

Card 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
desktop

Card 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
FreeGrid

Responsive grid

Create a responsive grid layout that adapts to screen size.

Masonry like layout
Only on Desktop
featured

Featured card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
variable height

Card 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
no js

Card 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
break-inside

Card 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
responsive

Card 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
style

Card 05

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
content

Card 06

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
tags

Card 07

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
images

Card 08

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
columns

Card 09

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
masonry-like

Card 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
desktop

Card 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
spacing

Card 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action
FreeGrid

Masonry like layout

Create a masonry-style grid layout.

Locked prompt
Example
01 / 05

Cyan

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Progression
0%

Calculated in real time based on the scroll position.

Example
02 / 05

Pink

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Progression
0%

Calculated in real time based on the scroll position.

Example
03 / 05

Lime

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Progression
0%

Calculated in real time based on the scroll position.

Example
04 / 05

Amber

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Progression
0%

Calculated in real time based on the scroll position.

Example
05 / 05

Violet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Progression
0%

Calculated in real time based on the scroll position.

PremiumTransitions

Locked prompt

Locked prompt
fade
01 / 06

Fade Transition

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Technique
fade

Opacity from 0 to 1

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

slide-up
02 / 06

Slide Up

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Technique
slide-up

Translation from bottom

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

slide-down
03 / 06

Slide Down

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Technique
slide-down

Translation from top

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

scale
04 / 06

Scale Transition

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Technique
scale

Progressive scaling

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

slide-left
05 / 06

Slide Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Technique
slide-left

Translation from right

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

slide-right
06 / 06

Slide Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Technique
slide-right

Translation from left

Example
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

PremiumTransitions

Locked prompt

Layout | Prompts CSS