Archives: Components

Gutenberg Navigation

Horizontal Vertical

GSAP parallax image in mask

This is the styling for a 2:1 ratio of image This is the styling for a 1:2 ratio of...

Alignments and Margins

Normal Paragraph Wide P Full P

GSAP parallax

Group 1 Group 2 Group 3

GSAP Pictures (like google store)

Beautiful moments,captured beautifully. It’s the brilliant Pixel camera, now with an ultrawide lens,and new features that help you to...

GSAP ScrollTrigger

Scroll down parallax1 parallax2 Simple GSAP box effect on timeline Rotate GSAP box effect on timeline TEXT GOES LEFT...

Content width Alignments

Some para copy her, normal width. Some para copy her, normal width.Some para copy her, normal width.Some para copy...

Animated Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non purus pharetra, porttitor ante aliquet, tristique lectus. Mauris ante...

Query (Cards, Testimonials etc)

Cards in columns Testimonials in slider Featured Cards x 2 Slides cpt in slider full width Testimonials in slider...

Team

Image and Content Team Cards Image and hover Content (not ideal for mobile) Business Card Style Business Card Style...

Full Screen Cover

How to use: Insert a cover block and in the advanced settings for the block add the class ‘screen-height‘.

Icons

FA Sync Alt FAD Acorn Icon On Colour Background Icon Alignment Icon Stack

Accordion

How to use: Insert an accordion block, then add rows.

Maps

Add the map block then select the location from the list. One map per page, at the moment.

Sliders

Slides not as a slider Testimonial Slider Card Slider Slider full image only

Widgets

Search widget Archives Calendar Categories Latest Posts RSS – list RSS – grid Tag Cloud Shortcode – gravity forms

Images, embeds and Galleries

Gallery – 2 Columns Full-width image Gallery Vimeo Embed Cover Image fixed background Image has class: .has-style-image-filter-hover-on Media and...

Buttons

Default Style Full Width Style Pill Style Rounded Style Hollow Style Default & Colour Style Alternative Style Default Sizes...

Colours

Heading 2 on a group with bg color Example copy here Heading 2 on a group with bg color...

Typography

Heading H1 Heading H2 Heading H3 Heading H4 Heading H5 Heading H6 Heading H2 Heading H2 Display H1 Display...

Search the site

Back to top