Columns

components/ui/_columns.scss

Simple component that allows to distribute block content into columns.

Id non id commodo nulla pariatur reprehenderit laborum. Lorem irure ullamco laborum in velit. Labore ipsum ullamco cupidatat elit nulla irure. Voluptate sunt sit culpa occaecat duis. Voluptate laborum ipsum deserunt enim dolor dolor sunt anim Lorem aliquip ipsum. Aute aute enim nulla aliqua laboris aliqua incididunt Lorem deserunt quis dolore sunt.

Responsive columns

  • By default, .my-column is set to 3 columns, it can be modified with $columns-default-amount
  • By default, maximum amount of columns is set to 3, it can be modified with $columns-max-amount
  • Amount of columns is responsive with the modifier .mod-[amount][-screenName]

Id non id commodo nulla pariatur reprehenderit laborum. Lorem irure ullamco laborum in velit. Labore ipsum ullamco cupidatat elit nulla irure. Voluptate sunt sit culpa occaecat duis. Voluptate laborum ipsum deserunt enim dolor dolor sunt anim Lorem aliquip ipsum. Aute aute enim nulla aliqua laboris aliqua incididunt Lorem deserunt quis dolore sunt.

Id non id commodo nulla pariatur reprehenderit laborum. Lorem irure ullamco laborum in velit. Labore ipsum ullamco cupidatat elit nulla irure. Voluptate sunt sit culpa occaecat duis. Voluptate laborum ipsum deserunt enim dolor dolor sunt anim Lorem aliquip ipsum. Aute aute enim nulla aliqua laboris aliqua incididunt Lorem deserunt quis dolore sunt.

Gap

Spacing between columns is called gap, there is a gap for each spacing set through $ds-spacings

Id non id commodo nulla pariatur reprehenderit laborum. Lorem irure ullamco laborum in velit. Labore ipsum ullamco cupidatat elit nulla irure. Voluptate sunt sit culpa occaecat duis. Voluptate laborum ipsum deserunt enim dolor dolor sunt anim Lorem aliquip ipsum. Aute aute enim nulla aliqua laboris aliqua incididunt Lorem deserunt quis dolore sunt.

Id non id commodo nulla pariatur reprehenderit laborum. Lorem irure ullamco laborum in velit. Labore ipsum ullamco cupidatat elit nulla irure. Voluptate sunt sit culpa occaecat duis. Voluptate laborum ipsum deserunt enim dolor dolor sunt anim Lorem aliquip ipsum. Aute aute enim nulla aliqua laboris aliqua incididunt Lorem deserunt quis dolore sunt.

Rule

It is possible to add optional spacer/separator between columns, it is called rule. Columns rules are defined like borders with your own names, set into the SASS map $columns-rules in _columns.scss.

Id non id commodo nulla pariatur reprehenderit laborum. Lorem irure ullamco laborum in velit. Labore ipsum ullamco cupidatat elit nulla irure. Voluptate sunt sit culpa occaecat duis. Voluptate laborum ipsum deserunt enim dolor dolor sunt anim Lorem aliquip ipsum. Aute aute enim nulla aliqua laboris aliqua incididunt Lorem deserunt quis dolore sunt.

Deserunt amet in duis occaecat nisi fugiat dolor pariatur. Cillum anim magna deserunt qui minim cillum cillum. Aliquip velit velit esse culpa duis eiusmod magna do sint irure nisi. Anim dolor eu ut consectetur eiusmod eu non ea mollit cupidatat ad cupidatat reprehenderit. Id non commodo magna ad. Nisi esse esse non velit exercitation cupidatat sunt laboris exercitation ut deserunt Lorem.