54 lines
1.1 KiB
Text
54 lines
1.1 KiB
Text
---
|
|
interface Props {
|
|
content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
|
|
gap?: number
|
|
}
|
|
|
|
const { content, gap } = Astro.props
|
|
---
|
|
|
|
<section class={`dasig-column-${content || 'center'}`} style={`gap: ${gap}rem`}>
|
|
<slot />
|
|
</section>
|
|
|
|
<style lang="sass">
|
|
.dasig-column-top
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
align-content: center
|
|
|
|
.dasig-column-center
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-column-right
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
justify-content: flex-end
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-column-split
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
justify-content: space-between
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-column-spaced
|
|
display: flex
|
|
flex-direction: column
|
|
flex-wrap: wrap
|
|
justify-content: space-around
|
|
align-items: center
|
|
align-content: center
|
|
</style>
|