Fonts

Primary Font: Quatro Slab

Variable name: $header-font

Used for headlines, sub headlines, short body copy, hyperlinks and CTA buttons

Header Font Weights

We have 3 different font weights we use: `normal`, `bold`, and `$medium-weight` (which maps to the CSS value of `500`). Use any of these three values when setting font weight for a header font (and preferably not any other values besides these three options.)

Example $body-font - size $la-body-font-size (default size):

Cupcake ipsum dolor sit. Amet sweet roll lollipop candy wafer ice cream gingerbread biscuit. Gummies macaroon bonbon tart cotton candy dessert. Dessert sesame snaps toffee oat cake caramels cookie biscuit macaroon marshmallow. Marzipan croissant gingerbread sweet roll muffin danish. Powder tootsie roll toffee. Carrot cake dessert dragée wafer cake brownie. Icing pastry oat cake.

Size $la-font-extra-small:

Example $code-font

Yay example code!!

Title Lines

If you want a particular header to have nice lines on either side of it, include the mixin title-line(color) to the styles you're defining for that header. Example:

@include title-line($la-grey);

Typography Helper Classes

These helper classes will allow you to apply consistent styling to different types of text you might want to use.

Adding the class .bold to an element will make it bold.

Adding the class .medium to an element will make it medium font weight (500).

blue-text
```
%h3.blue-text Example Blue Header
```

Example Blue Header

green-text
```
%h3.green-text Example Green Header
```

Example Green Header

pink-text
```
%h3.pink-text Example Pink Header
```

Example Pink Header

white-text
```
%h3.white-text Example White Header
```

Example White Header

Example Black (aka "la-navy") Header

Christina Koller - June 29, 2015 at 3:15pm

This documentation generated using Hologram