Blocks

What is a block?

A block is a unique component with its own interactions and themes that come together (just like Lego), allowing complete customisation over content creation.

Themes

Each block has a theme, which is simply either dark or light. For example, if you have a dark image, by selecting a dark theme, the text will change to white to ensure legibility and vice versa.

Starting blocks

To start a page use a Cover, Hero, Large Promo or Intro. Each one of these blocks has its own unique qualities and you should consider the context in which you use them.

For example, a Cover is great to use on a Journal post, but it is too dominant for a regular landing page, so consider using a Hero or Large Promo instead, or something more simple like an Intro if you just want to give the page a title.

Alignment

Typography

Starting blocks have additional options for left, center or right aligned typography. Be mindful of the context and choose the alignment appropriate to the page.

As a general rule, typography in a starting block should be center aligned.

Image

Promo and Cluster can be configured into either a left or right positions giving you more choice in your page design.

Block content

In addition to inserting content directly into a block, certain blocks can also pull data from existing pages or uCommerce.

To pull data from uCommerce, use a Promo, Cluster or Tile.

Dynamic overrides

Some blocks have the ability to override the information that is pulled in from the source you selected. For example, you might want to link to UFO Drip Chain Coating but want to use a different image to the one we use in the shop.

Types

Cover

A cover is a full-screen introduction to a page that will scale 100% to a users window. Covers can be seen on the Entrance, and more commonly on Journal posts. Used sparingly, they provide maximum impact for great photography.

Always hide the breadcrumb when using a cover

Nobody makes bearings like we make bearings

Bearings that last

Ceramic bearings are lighter and harder than steel bearings, providing less heat, less friction for a faster ride.

Hero

Similar to a Cover, a Hero is a large banner but has a fixed height. A hero is prominently placed at the start of a page to highlight the most import content.

Join the ride

How to apply UFO Drip Chain Coating

In this simple application video CeramicSpeed discuss the preferred application method for UFO Drip Chain Coating

For the journey

Ceramic bearings are lighter and harder than steel bearings, providing less heat, less friction for a faster ride.

Beauty is in the eye of the beholder

Promo Large

Large Promos have the same prominence as a Hero, but allow you to separate the image from the text to give more control of the position providing equal focus to the image and text.

Lighter, harder, faster, stronger

UFO Drip Chain Coating is the world's fastest bottled product for chains

Lighter, harder, faster, stronger

UFO Drip Chain Coating is the world's fastest bottled product for chains

Intro

An Intro is a simple way to give a page a title. It has less functionality than most blocks, but it is a popular choice when creating standard landing pages.

Oversized Pulley Wheel Systems

Bottom Brackets

Sponsorships

Promo Grid

Promo Grids are generally used on the Journal's landing page, but you can also use them in other areas to link your content together in a more compact way.

Promo Small

Promo Small can be used frequently on your page to link other pages together, or as an interesting way to punctuate blocks with more impactful imagery.

Turning power

The CeramicSpeed Bottom Brackets guarantee you the lowest friction, optimised power transfer, and longest product lifetime, helping you to save watts or ride faster.

Supporting the best

For us sponsorships are not just about providing game changing products, they're also about providing the best possible support for our athletes! And that includes looking after our athletes bikes.

Cluster

A cluster is a combination of two images and content clustered together to form a unified block. We often use these to display products next to photographs of the products being used. All products must be uploaded with a grey background with adequate space around the product. Give the product space to breathe.

Oversized Pulley Wheel Systems

Developed to answer the riders’ increasing need for improved drivetrain performance.

Team ’18 jersey now available

Large Cluster

You can turn any regular cluster into a large cluster in the block editor. Be mindful of the images used as they require curation to generate the most impact. Sometimes it is a good idea to use less detail imagery in the background for better focus on the foreground.

Ultimate performance without compromising quality

CeramicSpeed has been one of the leading manufacturers of high performance bearings for the cycling industry since 2000. Every single bearing is hand built in Denmark under laminar flow clean room conditions.

Ultimate performance without compromising quality

CeramicSpeed has been one of the leading manufacturers of high performance bearings for the cycling industry since 2000. Every single bearing is hand built in Denmark under laminar flow clean room conditions.

Tile Slider

A tile can display an item or a category. They can be displayed as a single row, slider or grid, with or without a header.

Products

Categories

Content

Tile Grid

Displays all your selected tiles in a fully responsive grid

Tile Offset

Offsets are a visual variation of a regular tile. They should always come in pairs.