Sign Up Risk Free - 30 Day Money Back Guarantee-Sign Up

Text Only Components

<SectionHeading>


noTick?: boolean Optional red tick over the title.

theme?: "light" | "dark" the theme option can be set to dark or light depending on the background.


Title

The area is mostly wooded but there are several places that offer spectacular views. This is optional, but recommended way to test how prepared you are for the trail ahead.

<FeaturedContent>


Both the label and link are optional. This component is often used as a child of a larger component.

Label

Title

6 mile thrill ride through the dense pine forest of the park. This is the most fun direction to ride it. The flowiest trails of the mountain! Super loose after second intersection. It's fire road the entire way, absolutely zero singletrack.

Link Text

Feature Components

<FeaturedSection>


This component takes <FeaturedContent> as a child to add all text. The UI element is optional for this component.

imageSide?: left | right Moves image to the right or left.

uiElementSide?: left | right | center Moves the UI element right, left or center.

uiElementPosition?: internal | external Moves the UI element to sit just outside the main image to inside the main image.

uiShadow?: visible | hidden Show or hide the UI shadow.

imageStyle?: inline | background Extends the main image to the edge of the screen.

Label

Title

This is the Feature Section, it is used to place a main image with a UI element overlay. The children of the Featured section show opposite the image. In this example the Feature Section is displaying a Feature Content component.

Link Text
Label

Title

This is the Feature Section, it is used to place a main image with a UI element overlay. The children of the Featured section show opposite the image. In this example the Feature Section is displaying a Feature Content component.

Link Text

<FeatureContentBox>


List items should be added in an Array. The link and link text are optional.

imageSide?: "right" | "left" Moves image to the right or left.

Title

Long climbs, roling hills, flat TTs and technical criteriums. Get personailzed training designed to make you a faster road racer.

Link Text
  • List Items

  • List Items

  • List Items

  • List Items

Link Text

Title

Long climbs, roling hills, flat TTs and technical criteriums. Get personailzed training designed to make you a faster road racer.

Link Text
  • List Items

  • List Items

  • List Items

  • List Items

Link Text

<FeatureSectionExtended>


Both label and link at the bottom of the component are optional. This component adds any children to the box component, any text, image, or component may be used as a child component.

imageSide?: "right" | "left" Moves image right or left.

Label

Title

Using TrainerRoad is simple, and you choose how you want to train. Inside, outside, with smart control, with power, or without.

 
VirtualPower™
Power Meter
Smart Trainer

Cost

Low

High

High

Precise Power Readings

Structured Workouts

Indoor Training

Outdoor Training

Compare Data with Others

Automatic Trainer Resistance

Label

Title

Using TrainerRoad is simple, and you choose how you want to train. Inside, outside, with smart control, with power, or without.

Heading

Here is the test text for the paragraph that will live in the new component. It is going to be great, just great.

Heading

Here is the test text for the paragraph that will live in the new component. It is going to be great, just great.

Heading

Here is the test text for the paragraph that will live in the new component. It is going to be great, just great.

Enter Your Information

Beginner User:0.0

Experienced User:0.0

Your Watts/Kg:0.0

Testimonial Components

<Testimonial>


Three options. sub is optional on the contained and default versions. The link can be hidden on the contained version.

type?: "contained" | "nps" | "default" Switch between the tree versions.

hideLink?: boolean Hide the link on the contained version.

When combined with Otero Upper, this trail is just crazy fast, flowy, amazingness.

Rating: 10 / 10

TrainerRoad Athlete

When combined with Otero Upper, this trail is just crazy fast, flowy, amazingness.

Name

Sub

When combined with Otero Upper, this trail is just crazy fast, flowy, amazingness.

<TestimonialCarousel>


Two carousel options nps and default. Default will take name and quote as props, nps will only take quote.

type?: "nps" | "default" Switch between the two variations.

<VideoTestimonial>


There are two versions of this component one with a quote and one without.

Miscellaneous Components

<BoxButton>


The label is optional.

<Accordion>


isOpen={true} Opens accordion by default.

allowMultipleOpen Allow multiple accordions can be open at the same time.

CTA Components

<FooterCTA>


The label is optional.

align?: "center" | "left" Title and text align center or left.

removeSpacer?: boolean Add or remove spacers to add padding.