eyebrow
Eyebrow
<Eyebrow>opening</Eyebrow>opening
componentes · 19
Galería de componentes
Vista para humanos: cada primitivo y cada plantilla de slide del design system sd, renderizado con texto lorem ipsum. La spec para máquinas vive en sd.michelvalles.com. Ejemplos completos en usos.sd.michelvalles.com.
01 — primitivos
Primitivos del sistema
eyebrow-mark
EyebrowMark
<EyebrowMark>section</EyebrowMark>section
highlight
Highlight
<Highlight>lorem ipsum</Highlight>Lorem ipsum dolor sit amet.
kpi-figure
KpiFigure
<KpiFigure size="lg">×3.4</KpiFigure>123
size="sm"
×3.4
size="md"
+21%
size="lg"
∞
size="xl"
logo-strip
LogoStrip
<LogoStrip />
reveal
Reveal
<Reveal direction="up" delay={0.1}>...</Reveal>Animación de entrada al cruzar el viewport. Hace scroll abajo y vuelve para reactivar.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
stagger-list
StaggerList
<StaggerList stagger={0.1}>...</StaggerList>·
Lorem ipsum dolor.
·
Consectetur adipiscing.
·
Sed do eiusmod tempor.
·
Ut labore et dolore.
·
Magna aliqua ut enim.
·
Ad minim veniam quis.
mask-reveal
MaskReveal
<MaskReveal lines={["line1", "line2"]} />Lorem ipsum dolorsit amet, consecteturadipiscing elit.
animated-text
AnimatedText
<AnimatedText text="lorem ipsum" split="words" />counter
Counter
<Counter to={1234} suffix="%" />0
+0%
×0,0
letter-counter
LetterCounter
<LetterCounter from="AA" to="NN" />Placeholder animado para una cifra pendiente.
AA
02 — plantillas de slide
Plantillas de slide
Cada plantilla se renderiza a pantalla completa porque están pensadas para deck editorial. Haz scroll para verlas en secuencia.
FeatureSlide
opening
Lorem ipsum dolor sit amet, consectetur adipiscing.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
PaperSlide
paper variant
Lorem ipsum dolor sit amet, consectetur adipiscing.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
ToneSlide
tone variant
Duis aute irure dolor in reprehenderit.
In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
BlockDivider
02
next block
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit, sed do eiusmod tempor incididunt.
CenteredThesis
thesis
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore.
KpiTrio
kpis
Lorem ipsum dolor sit amet.
×3.4
Lorem ipsum dolor sit amet consectetur.
12min
Adipiscing elit sed do eiusmod tempor.
+21%
Incididunt ut labore et dolore magna.
RuleCardY
rule card
Lorem ipsum dolor sit amet.
rule 01
Lorem ipsum dolor sit amet consectetur adipiscing.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
rule 02
Duis aute irure dolor in reprehenderit.
In voluptate velit esse cillum dolore eu fugiat nulla pariatur.
QuoteDivider
closing
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit, sed do eiusmod.