Styleguide

Textual Elements

Heading 1

Heading 2

Heading 3

Conubia penatibus porttitor elit imperdiet dapibus ultrices primis ante fames venenatis, molestie quam commodo eleifend interdum facilisi viverra per vestibulum consectetur eget, curae diam convallis mollis purus etiam mauris torquent congue.

  • Duis eros eget porttitor id,
  • tincidunt vitae suspendisse tellus,
  • mauris ligula mattis curabitur habitasse.

Dolor habitant nec purus laoreet adipiscing ultrices dapibus faucibus facilisi enim. Etiam vitae nisi nibh sociis ipsum montes eleifend metus elit, massa faucibus sagittis velit rhoncus natoque mattis feugiat consectetur, urna ac sodales platea justo tristique tincidunt erat.

  1. Duis eros eget porttitor id,
  2. tincidunt vitae suspendisse tellus,
  3. mauris ligula mattis curabitur habitasse.
This text is large. 
This text is small. 
This text is in all caps

* There is an additional class .h1 which you can apply to text in order to style it like an h1 without the semantic implications. 

Colors

Spacing 

The style guide supports several CSS classes which enables the control of spacing — margin and padding — across UI elements. 

Margins 

  • mt-sm adds a small top margin 
  • mt-base adds a top margin equivalent of 1em 
  • mt-md adds a medium top margin
  • mt-lg adds a large top margin 
  • mt-xl adds a huge top margin 
  • mb-sm adds a small bottom margin 
  • mb-base adds a bottom margin equivalent of 1em 
  • mb-md adds a medium top margin
  • mb-lg adds a large bottom margin 
  • mb-xl adds a huge bottom margin 
  • ml-sm adds a small left margin 
  • ml-base adds a left margin equivalent of 1em 
  • mr-sm adds a small right margin 
  • mr-base adds a right margin equivalent of 1em 

Padding 

  • p-sm adds a small amount of padding on all sides of the element 
  • p-base adds 1em of padding on all sides of the element 
  • p-md adds 2em of padding on all sides of the element 
  • p-lg adds a large amount of padding on all sides of the element 
  • pt-sm adds a small of padding to the top of the element 
  • pt-base adds 1em of padding to the top of the element 
  • pt-lg adds a large amount of padding to the top of the element 
  • pt-xl adds a huge amount of padding to the top of the element 
  • pb-sm adds a small amount of padding to the bottom 
  • pb-base adds 1em of padding to the bottom of an element 
  • pb-lg adds a large amount of padding to the bottom of an element 
  • pb-xl adds a huge amount of padding to the bottom of the element 
  • pl-sm adds a small amount of padding to the left side of an element 
  • pl-base adds 1em of padding to the left side of an element 
  • pr-sm adds a small amount of padding to the right side of an element 
  • pr-base adds 1em of padding to the left side of an element 

Utilities

The style guide supports a number of utility classes you are encouraged to use in order to add effects consistently. 

  • tactile makes things rise on hover 
  • tactile-shadow adds a drop shadow on hover 
  • animated is required in order to animate an element, add infinite for the animation to loop, available animations are bounce and float, and additionally you can use delay-1/2/3 to add different delays to your animation so the infinite loops appear more random 
  • fade-top adds a fade from white at the bottom to transparent at the top, and is used to cover up a lower portion of an element above via a negative top margin 
  • shadow-lg adds a large shadow to an element 
  • border-radius-lg rounds the corners of an element aggressively 
  • border-radius-lg rounds the corners of an element moderately 
  • inverted-links is meat to be used within light-on-dark containers in order to make text links light and visible 
  • link-ui makes links the same color as standard text, but on hover colors them the link color 
  • text-md makes text slightly larger and more comfortable to read in long form 
  • block-feature applies styles for boxed content, add a background color on an individual element basis 
  • hero-consumer is a special class for the hero element allowing it to have a background image which extends under the header 
  • .feature-block-wrapper is used to disable the horizontal scroll which may appear due to absolute positioning within it 
  • .feature-wrapper is an element wrapping the feature illustrations which are positioned relative to it 
Cacotec

Subscribe to Newsletter

All content copyright Cacotec LTD 2019. All rights reserved.
Log in to Cacotec 

Not a customer yet?  Request a demo 
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram