Sizes

Line height

By default, a line height of 1.5 is used. In some cases, like headings, or interface elements such as buttons — where no more than one or two lines of text are expected — it is possible to employ a reduced line height of 1.35.

@lineHeight (1.5)

Esse atque eaque earum minima laborum voluptatum error quisquam unde praesentium nemo, consectetur cum aspernatur hic! Voluptatem voluptatibus, maiores ullam obcaecati laudantium dolorum rerum consectetur doloremque maxime magni. Modi, perspiciatis? Voluptates libero harum eveniet. Ut quos laborum quo. Nobis pariatur, reiciendis minima saepe similique. In ipsam officia, cupiditate eum inventore, iste quaerat laborum necessitatibus voluptate dolorum delectus non. Culpa, animi.

@lineHeightReduced (1.35)

Esse atque eaque earum minima laborum voluptatum error quisquam unde praesentium nemo, consectetur cum aspernatur hic! Voluptatem voluptatibus, maiores ullam obcaecati laudantium dolorum rerum consectetur doloremque maxime magni. Modi, perspiciatis? Voluptates libero harum eveniet. Ut quos laborum quo. Nobis pariatur, reiciendis minima saepe similique. In ipsam officia, cupiditate eum inventore, iste quaerat laborum necessitatibus voluptate dolorum delectus non. Culpa, animi.

Flow

Flow represents the way elements are vertically positioned in relation to each other. Its essence is therefore white space — the empty space between elements — and vertical padding in the elements themselves. All such spaces should be rational multiples of the default line height in rem units, e.g. 1.5rem * @lineHeight. The result of this constraint is the so called vertical rhythm which, because of the consistency it produces, helps the eyes when scanning the content. To set spacing, use the function .v-spacing() or some of the utility spacing classes such as .u-no-spacing.

Consequatur necessitatibus, dolorum? Voluptate fugit possimus consequatur accusantium ex, perspiciatis harum dolor. Eaque est vitae qui quasi facilis sit neque officia, molestiae fuga quos labore a corporis similique modi, nihil.

Type