UNPKG

@platformbuilders/react-elements

Version:

Platform Builders Shared Components Library For React Web

246 lines (213 loc) 3.8 kB
--- id: component.typography.styleGuide title: Guia de estilo --- <!-- Component declaration begin --> import { Typography } from '@platformbuilders/react-elements'; <!-- Component declaration end --> <!-- Documentation begin --> Aqui você verá como é o CSS para todas as variações do typography. ## Body1 <Typography variant="body1" > Texto body1 </Typography> ```CSS body1 { font-size: 1rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.5; letter-spacing: 0.00938em; } ``` ## Body2 <Typography variant="body2" > Texto body2 </Typography> ```CSS body2 { font-size: 1rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.5; letter-spacing: 0.00938em; } ``` ## Button <Typography variant="button" > Texto button </Typography> ```CSS button { color: rgba(0, 0, 0, 0.87); padding: 6px 16px; font-size: 0.875rem; min-width: 64px; box-sizing: border-box; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; line-height: 1.75; border-radius: 4px; letter-spacing: 0.02857em; text-transform: uppercase; } ``` ## Caption <Typography variant="caption" > Texto caption </Typography> ```CSS caption { font-size: 0.75rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.66; letter-spacing: 0.03333em; } ``` ## h1 <Typography variant="h1" > Texto h1 </Typography> ```CSS h1 { font-size: 6rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 300; line-height: 1.167; letter-spacing: -0.01562em; } ``` ## h2 <Typography variant="h2" > Texto h2 </Typography> ```CSS h2 { font-size: 3.75rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 300; line-height: 1.2; letter-spacing: -0.00833em; } ``` ## h3 <Typography variant="h3" > Texto h3 </Typography> ```CSS h3 { font-size: 3rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.167; letter-spacing: 0em; } ``` ## h4 <Typography variant="h4" > Texto h4 </Typography> ```CSS h4 { font-size: 2.125rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.235; letter-spacing: 0.00735em; } ``` ## h5 <Typography variant="h5" > Texto h5 </Typography> ```CSS h5 { font-size: 1.5rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.334; letter-spacing: 0em; } ``` ## h6 <Typography variant="h6" > Texto h6 </Typography> ```CSS h6 { font-size: 1.25rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; line-height: 1.6; letter-spacing: 0.0075em; } ``` ## Overline <Typography variant="overline" > Texto overline </Typography> ```CSS overline { font-size: 0.75rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 2.66; letter-spacing: 0.08333em; text-transform: uppercase; } ``` ## Subtitle1 <Typography variant="subtitle1" > Texto subtitle1 </Typography> ```CSS subtitle1 { font-size: 1rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.75; letter-spacing: 0.00938em; } ``` ## Subtitle2 <Typography variant="subtitle2" > Texto subtitle2 </Typography> ```CSS subtitle2 { font-size: 0.875rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 500; line-height: 1.57; letter-spacing: 0.00714em; } ``` <!-- Documentation end -->