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.
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 TextFeature 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.
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 TextTitle
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.
<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.
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
—
—
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.
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.
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.