Style guide

Buttons

Primary button

Download Info Package

Secondary button

Download Syllabus

Secondary Violet button

Apply Now

Secondary White button

Meet Our Graduates

Tertiary button

Get started for free

Submit button


{/* === BUTTONS === */}
{/* primary */}
<Button
  type="link"
  linkPath="/to-corresponding-page"
  buttonStyle="primary"
  text="Download Info Package"
/>

{/* secondary */}
<Button
  type="link"
  linkPath="/to-corresponding-page"
  buttonStyle="secondary"
  text="Download Syllabus"
/>

{/* secondaryviolet */}
<Button
  type="link"
  linkPath="/to-corresponding-page"
  buttonStyle="secondaryviolet"
  text="Apply Now"
/>

{/* secondarywhite */}
<Button
  type="link"
  linkPath="/to-corresponding-page"
  buttonStyle="secondarywhite"
  text="Meet Our Graduates"
/>

{/* tertiary */}
<Button
  type="link"
  linkPath="/to-corresponding-page"
  buttonStyle="tertiary"
  text="Get started for free"
/>

{/* submit */}
<Button 
  type="submit" 
  buttonStyle="submit" 
  text="Request city" 
/>
                  

Carousel Arrows

Primary arrow

Primary Violet arrow

Secondary arrow

Transparent Background


{/* === CAROUSEL ARROWS === */}

{/* Direction of Arrow */}
{/* previous */}
<CarouselArrow 
  direction="previous"
  type="primary"
/>

{/* next */}
<CarouselArrow 
  direction="next"
  type="primaryviolet"
/>

{/* Type of Arrow */}
{/* primary */}
<CarouselArrow 
  direction="next"
  type="primary"
/>

{/* primaryviolet */}
<CarouselArrow 
  direction="next"
  type="primaryviolet"
/>

{/* secondary */}
<CarouselArrow 
  direction="next"
  type="primaryviolet"
/>

{/* Optional Prop: transparentBackground */}
<CarouselArrow 
  direction="next"
  type="secondary"
  transparentBackground
/>