Navigation

Typography

Header Styles

Check the table below for common Scss Variables set in _settings.scss which should be stored in your project's 'sass' directory. The _settings.scss file explains what all the variables are and can easily be followed. See documentation for Responsive Templates and CSS for the location of all .scss files. With any change to the variables you will need to recompile the CSS. Changes outside the scope of Foundation are made in _styles.scss and override the default Foundation styling. This is Venda's Sassy CSS which uses some of the Foundation Scss Variables and some of its own set in _settings.scss.

See Foundation Documentation: Typography for details of all Scss Variables.

Style Scss Variable
Header font $header-font-family
Header font colour $header-font-color
Header size (h1 - h6) $h1-font-size
Header subheader colour $subheader-font-color
Main font colour $body-font-color
Main body font $body-font-family
Base html and font size $base-font-size
Link colour (aka anchors in _settings.scss) $anchor-font-color
Link hover colour (aka anchors in _settings.scss) $anchor-font-color-hover

h1 header

h2 header

h3 header

h4 header

h5 header
h6 header

h1 header Small header text.

h2 header Small header text.

h3 header Small header text.

h4 header Small header text.

h5 header Small header text.
h6 header Small header text.

h1.subheader header

h2.subheader header

h3.subheader header

h4.subheader header

h5.subheader header
h6.subheader header

Paragraphs

This is a lead paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

It's really easy to add emphasis to copy. There standards like bold and italics, as well as styles such as <code>, <kbd> and <small>


Links

This is a header link.

This is a header link.

This is a header link.

This is a header link.

This is a header link.

This is a standard inline paragraph link.


Lists

ul.disc
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.circle
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.square
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
  4. Ordered List Item
Definition Title
Definition text, you can add as many of these as you need. The line-height matches paragraphs.

Blockquotes

I do not fear computers. I fear the lack of them. Isaac Asimov


V-Cards

We are using a hcard microformat for the addresses displayed across the site. Read more about this at microformats.


Inline Lists


Minimum length is
Maximum length is
Please enter a value in both fields
Please enter your name
Please enter a message
Please enter the name of the recipient
Please enter a valid quantity
Please enter a phone number
Please enter a valid phone number
Please enter an email address
Please enter a valid email address
weleda
restofworld
en
GBP
http://www.weleda.co.uk
http://www.weleda.co.uk/bin/venda