Box
<gstock-box>
|
GstockBox
Ejemplos
Básico
El componente Box es un primitivo de layout que proporciona propiedades consistentes para espaciado, alineación y display.
Este es un box básico con padding, borde y esquinas redondeadas.
<gstock-box padding="var(--gstock-space-padding-block-md) var(--gstock-space-padding-inline-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p>Este es un box básico con padding, borde y esquinas redondeadas.</p>
</gstock-box>Flex Layout
Utilice las propiedades display="flex" y gap para crear layouts flexibles.
Item 1
Item 2
Item 3
<gstock-box display="flex" gap="var(--gstock-spacing-md)" padding="var(--gstock-spacing-lg)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<gstock-box padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)" class="flex-item">
<p>Item 1</p>
</gstock-box>
<gstock-box padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)" class="flex-item">
<p>Item 2</p>
</gstock-box>
<gstock-box padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)" class="flex-item">
<p>Item 3</p>
</gstock-box>
</gstock-box>
<style>
.flex-item {
flex: 1;
}
</style>Centrado
Combine display="flex", align-items y justify-content para centrar contenido.
Contenido Centrado
Este contenido está perfectamente centrado vertical y horizontalmente.
<gstock-box display="flex" flex-direction="column" align-items="center" justify-content="center" padding="var(--gstock-space-padding-block-2xl) var(--gstock-space-padding-inline-2xl)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)" class="centered-box">
<h3>Contenido Centrado</h3>
<p>Este contenido está perfectamente centrado vertical y horizontalmente.</p>
</gstock-box>
<style>
.centered-box {
min-height: 300px;
}
</style>Padding
El atributo padding acepta cualquier valor CSS de padding usando design tokens.
Padding XS
Padding SM
Padding MD
Padding LG
Padding XL
Padding 2XL
<div class="container">
<gstock-box padding="var(--gstock-space-padding-block-xs) var(--gstock-space-padding-inline-xs)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p>Padding XS</p>
</gstock-box>
<gstock-box padding="var(--gstock-space-padding-block-sm) var(--gstock-space-padding-inline-sm)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p>Padding SM</p>
</gstock-box>
<gstock-box padding="var(--gstock-space-padding-block-md) var(--gstock-space-padding-inline-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p>Padding MD</p>
</gstock-box>
<gstock-box padding="var(--gstock-space-padding-block-lg) var(--gstock-space-padding-inline-lg)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p>Padding LG</p>
</gstock-box>
<gstock-box padding="var(--gstock-space-padding-block-xl) var(--gstock-space-padding-inline-xl)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p>Padding XL</p>
</gstock-box>
<gstock-box padding="var(--gstock-space-padding-block-2xl) var(--gstock-space-padding-inline-2xl)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p>Padding 2XL</p>
</gstock-box>
</div>
<style>
.container {
display: flex;
flex-direction: column;
gap: var(--gstock-spacing-md);
}
</style>Padding Direccional
Use padding-inline-start, padding-inline-end, padding-block-start y padding-block-end para controlar el padding por dirección.
Padding horizontal grande, vertical pequeño
Padding horizontal pequeño, vertical grande
Solo padding horizontal
Solo padding vertical
<div class="container">
<gstock-box padding-inline-start="var(--gstock-spacing-lg)" padding-inline-end="var(--gstock-spacing-lg)" padding-block-start="var(--gstock-spacing-sm)" padding-block-end="var(--gstock-spacing-sm)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p class="text">Padding horizontal grande, vertical pequeño</p>
</gstock-box>
<gstock-box padding-inline-start="var(--gstock-spacing-sm)" padding-inline-end="var(--gstock-spacing-sm)" padding-block-start="var(--gstock-spacing-lg)" padding-block-end="var(--gstock-spacing-lg)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p class="text">Padding horizontal pequeño, vertical grande</p>
</gstock-box>
<gstock-box padding-inline-start="var(--gstock-spacing-xl)" padding-inline-end="var(--gstock-spacing-xl)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p class="text">Solo padding horizontal</p>
</gstock-box>
<gstock-box padding-block-start="var(--gstock-spacing-xl)" padding-block-end="var(--gstock-spacing-xl)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p class="text">Solo padding vertical</p>
</gstock-box>
</div>
<style>
.container {
display: flex;
flex-direction: column;
gap: var(--gstock-spacing-md);
}
.text {
margin: 0;
}
</style>Gap
El atributo gap controla el espaciado entre elementos hijos en layouts flex o grid.
1
2
3
1
2
3
1
2
3
1
2
3
<div class="container">
<gstock-box display="flex" gap="var(--gstock-spacing-xs)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</gstock-box>
<gstock-box display="flex" gap="var(--gstock-spacing-md)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</gstock-box>
<gstock-box display="flex" gap="var(--gstock-spacing-lg)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</gstock-box>
<gstock-box display="flex" gap="var(--gstock-spacing-xl)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</gstock-box>
</div>
<style>
.container {
display: flex;
flex-direction: column;
gap: var(--gstock-spacing-md);
}
.item {
background: var(--gstock-color-background-neutral-subtle);
padding: var(--gstock-spacing-sm);
border-radius: var(--gstock-border-radius-sm);
}
</style>Justify Content
Use justify-content para controlar la alineación de elementos en el eje principal.
Inicio
Flex
Start
Centro
Center
Fin
Flex
End
Space
Between
Space
Evenly
<div class="container">
<gstock-box display="flex" justify-content="flex-start" gap="var(--gstock-spacing-sm)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">Inicio</div>
<div class="item">Flex</div>
<div class="item">Start</div>
</gstock-box>
<gstock-box display="flex" justify-content="center" gap="var(--gstock-spacing-sm)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">Centro</div>
<div class="item">Center</div>
</gstock-box>
<gstock-box display="flex" justify-content="flex-end" gap="var(--gstock-spacing-sm)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">Fin</div>
<div class="item">Flex</div>
<div class="item">End</div>
</gstock-box>
<gstock-box display="flex" justify-content="space-between" gap="var(--gstock-spacing-sm)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">Space</div>
<div class="item">Between</div>
</gstock-box>
<gstock-box display="flex" justify-content="space-evenly" gap="var(--gstock-spacing-sm)" padding="var(--gstock-spacing-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<div class="item">Space</div>
<div class="item">Evenly</div>
</gstock-box>
</div>
<style>
.container {
display: flex;
flex-direction: column;
gap: var(--gstock-spacing-md);
}
.item {
background: var(--gstock-color-background-neutral-subtle);
padding: var(--gstock-spacing-md);
border-radius: var(--gstock-border-radius-sm);
}
</style>Estilo de Tarjeta
Combine múltiples propiedades para crear componentes visuales complejos.
Card con Box
Este box tiene sombra y se ve como una tarjeta
<gstock-box display="flex" justify-content="space-between" align-items="center" padding="var(--gstock-space-padding-block-lg) var(--gstock-space-padding-inline-lg)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)" box-shadow="var(--gstock-shadow-md)">
<div>
<h4 class="title">Card con Box</h4>
<p class="description">Este box tiene sombra y se ve como una tarjeta</p>
</div>
<gstock-button variant="plain">Acción</gstock-button>
</gstock-box>
<style>
.title {
margin: 0 0 var(--gstock-space-padding-block-sm) 0;
}
.description {
margin: 0;
color: var(--gstock-color-text-disabled);
}
</style>Elementos Semánticos
Box puede usarse para crear layouts semánticos de header, main y footer.
Encabezado
Contenido principal del layout
<gstock-box display="flex" flex-direction="column" gap="var(--gstock-space-gap-md)" padding="var(--gstock-space-padding-block-xl) var(--gstock-space-padding-inline-xl)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<gstock-box padding-block-start="var(--gstock-space-padding-block-md)" padding-block-end="var(--gstock-space-padding-block-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<h3 class="header-title">Encabezado</h3>
</gstock-box>
<gstock-box padding="var(--gstock-space-padding-block-lg) var(--gstock-space-padding-inline-lg)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)" class="main-content">
<p>Contenido principal del layout</p>
</gstock-box>
<gstock-box padding-block-start="var(--gstock-space-padding-block-md)" padding-block-end="var(--gstock-space-padding-block-md)" border-width="var(--gstock-border-width)" border-style="solid" border-color="var(--gstock-color-border-subtle)" border-radius="var(--gstock-border-radius-md)">
<p class="footer-text">Pie de página</p>
</gstock-box>
</gstock-box>
<style>
.header-title {
margin: 0;
}
.main-content {
flex: 1;
}
.footer-text {
margin: 0;
text-align: center;
color: var(--gstock-color-text-secondary);
}
</style>