Styled

Styled is a quick way to control styling such as margin and padding with Camp tokens.

Live Demo

Resources

Install


yarn add @activecampaign/camp-components-styled

Implementation details

Styled is a primitive component for quickly adding elements and applying CSS styles using Camp tokens. By default, it creates a div but you can control what element it creates using the as prop. Pass in any styles using tokens using the styles prop as well as shorthand styles using the props outlined above (e.g., m="sp1100" to set margin equal to the Camp token sp1100).


import Styled from '@activecampaign/camp-components-styled';
 
export default function () {
  return (
    <Styled styles={{ color: 'mint500', padding: 'sp400', display: 'inline' }}>
      <p>Hello, World!</p>
    </Styled>
  );
}

Similar components

Flex

A layout model providing a more efficient way to lay out, align and distribute space among items in a container.