Grid

Use debug={true} on Grid components to show gutters, column widths and content areas.

Use the width prop on Column components to specify how much of the 12 column grid they should fill

Use a custom type prop to specify which element the Grid, Row and Column components should use (nav, ul and li are used below)

Use extend={true} on Grid components to extend the grid beyond it's maximum width.

Use extend={true} on Row and Column components to remove their padding.

Use wrap={false} on Row components to prevent columns from wrapping at the primary breakpoint.

Use reverse={true} on Grid components to set the flex-direction of all Row components in the Grid to row-reverse. The flex-direction will switch to column at the primary grid breakpoint. The same props can apply to individual Row components as well.

Use reverse={`alternate`} on Grid components to set the flex-direction of all even Row components in the Grid to row-reverse. The flex-direction of reversed rows will switch to column at the primary grid breakpoint.

Use reverse={`onResponsive`} on Grid or Row components to set the flex-direction of rows to reverse at the primary grid breakpoint.

Use align={`center | flex-start | flex-end`} on Row components to specify how Column components inside rows should align.

Typography

Large paragraph distinctio quisquam a reprehenderit autem numquam quis qui, dolorum accent pariatur illum.

Heading Two

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Beatae facere minima quisquam vel repudiandae ullam fugiat reiciendis possimus odit dicta nesciunt voluptate facilis accusantium, natus odio aliquid. A ab voluptatibus maxime sit illum placeat dignissimos, facilis fugiat eum. Ad, aliquam asperiores veniam quo ducimus autem assumenda neque! Cupiditate consequatur, atque explicabo repellendus, ab tempore ipsa, obcaecati odio veritatis tenetur hic?

Heading Three

Heading Four

Heading Five

Heading Six

Eybrow Large

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae facere minima quisquam vel repudiandae ullam fugiat reiciendis possimus odit dicta nesciunt voluptate facilis accusantium, natus odio aliquid. A ab voluptatibus maxime sit illum placeat dignissimos, facilis fugiat eum. Ad, aliquam asperiores veniam quo ducimus autem assumenda neque! Cupiditate consequatur, atque explicabo repellendus, ab tempore ipsa, obcaecati odio veritatis tenetur hic?

Eybrow Medium

Small paragraph dolor sit amet consectetur adipisicing elit. Beatae facere minima quisquam vel repudiandae ullam fugiat reiciendis possimus odit dicta nesciunt voluptate facilis accusantium, natus odio aliquid. A ab voluptatibus maxime sit illum placeat dignissimos, facilis fugiat eum. Ad, aliquam asperiores veniam quo ducimus autem assumenda neque! Cupiditate consequatur, atque explicabo repellendus, ab tempore ipsa, obcaecati odio veritatis tenetur hic?

Eybrow Small

Smaller paragraph dolor sit amet consectetur adipisicing elit. Beatae facere minima quisquam vel repudiandae ullam fugiat reiciendis possimus odit dicta nesciunt voluptate facilis accusantium, natus odio aliquid. A ab voluptatibus maxime sit illum placeat dignissimos, facilis fugiat eum. Ad, aliquam asperiores veniam quo ducimus autem assumenda neque! Cupiditate consequatur, atque explicabo repellendus, ab tempore ipsa, obcaecati odio veritatis tenetur hic?

Smallest paragraph dolor sit amet consectetur adipisicing elit. Beatae facere minima quisquam vel repudiandae ullam fugiat reiciendis possimus odit dicta nesciunt voluptate facilis accusantium, natus odio aliquid. A ab voluptatibus maxime sit illum placeat dignissimos, facilis fugiat eum. Ad, aliquam asperiores veniam quo ducimus autem assumenda neque! Cupiditate consequatur, atque explicabo repellendus, ab tempore ipsa, obcaecati odio veritatis tenetur hic?

Buttons

All buttons will extend the size--small class at the primary grid breakpoint. To disable this behavior, pass the size={`medium`} prop to the button.

theme={`default`}

theme={`default`}
styles={[`outlined`]}

theme={`default`}
styles={[`withIcon`]}

theme={`default`}
size={`small`}

theme={`default`}
size={`medium`}

theme={`orange`}

theme={`orange`}
styles={[`outlined`]}

theme={`orange`}
styles={[`withIcon`]}

theme={`orange`}
size={`small`}

theme={`orange`}
size={`medium`}

theme={`gray-500`}

theme={`gray-500`}
styles={[`outlined`]}

theme={`gray-500`}
styles={[`withIcon`]}

theme={`gray-500`}
size={`small`}

theme={`gray-500`}
size={`medium`}

Media Blocks

Sliders

The Slider component is a utility component that wraps an instance of and allows any child elements to be passed into it. Each child element will become a new slide. The Flickity details all of the options that can be passed into the slider with sliderOptions={{...}} and examples can be seen below for many of the options as well as the custom props that have been created for the Slider.

The default, draggable Slider (no arrows, autoplay, wrap, overflow, etc) 👇

Slider with arrows={{enabled: true}} 👇

Slider with arrows={{enabled: true, style={`overlay`}}} 👇

Slider with overflow={true} 👇

A Slider with sliderOptions={{autoPlay: 2500}} (pauses when hovered, stops when dragged) 👇

A Slider with arrows={{enabled: true, style: `overlay`}} sliderOptions={{wrapAround: true}} 👇

A Slider with dots={{enabled: true}} 👇

The arrows and dots objects both accept aboveResponsive and belowResponsive props (both default to true) that specify if the control should appear above or below the primary breakpoint. A slider with arrows={{enabled: true, belowResponsive: false}} and dots={{enabled: true, aboveResponsive: false}} 👇

Slide Toggles

SlideTrigger, SlideToggle and SlideGroup are utility components that wrap to animate the hiding and showing of elements. Additional attributes and functionality have been added as well for accessibility purposes.

SlideTrigger should wrap the element that should trigger the hide / show animation, SlideToggle should wrap the element that should hide and show, and SlideGroup should wrap groups of multiple SlideTrigger and SlideToggle pairs. SlideTrigger and SlideToggle should be placed directly adjacent to each other and SlideTrigger should always come before SlideToggle. Each SlideTrigger / SlideToggle pair can be wrapped in additional components or elements as well.

When active, SlideTrigger and SlideToggle both have an active class applied to allow the styling of the active state to be adjusted. The name of the active class can be changed by passing a custom activeClass to SlideTrigger.

For accessibility, to indicate the action that will be performed by interacting with the trigger, a title string can be passed in as a prop to SlideTrigger to add title and aria-label attributes to the SlideTrigger (ex. "Show answer"). SlideTrigger components are also keyboard-focusable with the tab key and can be toggled with the space bar and Enter key when selected.

If a SlideTrigger / SlideToggle pair should be active and open by default, pass active={`true`} to the SlideTrigger. In a SlideGroup, if only one SlideTrigger and SlideToggle should be active at a time, add onlyOne={`true`} to the SlideGroup props. Additional options from the such as duration can be passed into SlideTrigger through the options prop.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo sed dolorum eaque qui architecto! Quod ratione incidunt quos velit sint explicabo ipsam eveniet id provident autem quo at est molestias repudiandae illo delectus, consectetur sapiente, illum voluptatem quibusdam eos harum. Nesciunt sed quae dolorum dolore repellat tenetur id illum minus!

StickyScroller

Modals

The ToggleModal component can be used to hide and show modals, and the ModalVideo, and Modal components can be used to display videos and other types of content in popup windows. Any content that is vertically overflowing inside .modal__content will be scrollable and the html element will automatically be set to overflow: hidden when a Modal is active. Click the X or anywhere outside the inner content of the modal to close it, or set the clickToClose prop to false on your Modal or ModalVideo to only allow it to be closed when the X is clicked.

ToggleModal requires an action prop that must be equal to `show` or `hide`, Modal requires at least one child node to be passed into it, and VideoModal requires a src prop that must be a string.

When using ToggleModal with action={`show`}, be sure to pass a valid document.querySelector value to the targetModal prop so that it knows which Modal to toggle (targetModal={`.modal__example`} will target a Modal with className={`modal__example`}). Be sure that targetModal values are individualistic, as the incorrect Modal can be targeted if there are multiple Modal components on a page and the value is not specific to a single modal.

Hero

The Hero component in its most basic form takes in two attributes: heading as a string and img as an object. The img object will at the very least need a key called src with the value being the path to the image file, however one can also provide a value for the key mobileSrc, which will be used for screen widths less than 768px.

There are three additional, optional elements which can be added: overline, line2Heading, and accentLine.

Text added as overline will populate as highlighted orange text which accompanies the main hero text (such as the word 'OPTIMIZE' seen below).

Text added as line2Heading will result in hero text that breaks onto the second line and stylistically shifts to the right (such as the text '& RECEIVING' seen below).

accentLine will add an orange line to the bottom of the hero container which draws attenton to the section placed below the hero

Passing a prop textCallout to the hero will automatically create a TextCallout component below the hero section, as seen below.

TextCallout

The TextCallout component (seen below the hero above) in its most basic form takes a simple text attribute.

There are four additional attributes that can be passed as props to the TextCallout component: type, width, bgColor, and textColor.

type allows for the text element to be something other than its default which is a paragraph tag (such as the h5 being used below).

bgColor changes the color of the callout background (default is white), while textColor will change the color of the text (default is black).

width takes a number between 1 and 12 as a string such as "6" or "9" and will set the number of columns out of 12 that are used for the width of the text (default is set to 5).

ImageQuoteSlider

The ImageQuoteSlider can be used to display 2-column slides, with one column displaying an image and the second column displaying a stylized quote with citation.

You must pass an array of objects to props called slides. Each object will output a new slide and takes in an image object with keys for src and altText, as well as a quote object with keys for text and citation.

You can also pass in a value of reverse: true for any of the slides in order to show the quote on the left and the image on the right. Example shown below.

ImageCallout

The ImageCallout is similar to the Hero in the sense that a large background image will be displayed along with a heading. However, the ImageCallout component takes in body text as well and is used to show large, attention-drawing content in the middle of a page instead of at the top.

SEE KARGO IN ACTION