> Section

Section

Section de page. Permet de contenir une section dans un élément adapté aux différentes platformes. Composant de type Box.

TagscoreInformationsExperimentalExemples5StylesDisponibles

Default

Section

export const Default = () => (
  <Section>
    <Box>
      <Typography>Section</Typography>
    </Box>
  </Section>
);

WithPaddingY

Section avec background et padding Y

export const WithPaddingY = () => (
  <Section backgroundColor={paddingColor} withPaddingY>
    <Box backgroundColor={innerBoxColor} p={'050'}>
      <Typography>Section avec background et padding Y</Typography>
    </Box>
  </Section>
);

WidthMdSize

Section avec background et size md (1200px)

export const WidthMdSize = () => {
  const styles = useStyles();
  return (
    <Section backgroundColor={paddingColor} size="md">
      <Box backgroundColor={innerBoxColor} p={'050'}>
        <Typography>Section avec background et size md ({styles.sectionContainerMD.maxWidth}px)</Typography>
      </Box>
    </Section>
  );
};

WidthFullSize

Section avec background et size full (taille par défaut)

export const WidthFullSize = () => (
  <Section backgroundColor={paddingColor} size="full">
    <Box backgroundColor={innerBoxColor} p={'050'}>
      <Typography>Section avec background et size full (taille par défaut)</Typography>
    </Box>
  </Section>
);

WidthSmSize

Section avec background et size sm (600px)

export const WidthSmSize = () => {
  const styles = useStyles();
  return (
    <Section backgroundColor={paddingColor} size="sm">
      <Box backgroundColor={innerBoxColor} p={'050'}>
        <Typography>Section avec background et size sm ({styles.sectionContainerSM.maxWidth}px)</Typography>
      </Box>
    </Section>
  );
};

Alveole UI Kit — v1.8.4