Navigation

Buttons

Check the table below for common Scss Variables set in _settings.scss which should be stored in your project's 'scss' 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: Buttons for details of all Scss Variables.

Style Scss Variable
Primary button colour / Signposts
Also other UI elements i.e. active page in nav
$primary-color
Secondary button colour $secondary-color
Purchase path button colour $success-color
Alert button colour $alert-color
Tertiary colour $tertiary-color
Quaternary button colour $quaternary-color
Padding for buttons $button-tny, $button-sml, $button-med, $button-lrg
Curved edge of .radius buttons $button-radius ($global-radius)

Sizes, Type and Styles

Signposts

checkout (header), more info (category), store locator button (go buttons / view store info etc), buttons within static content

Tiny

Small

Medium

Large
Secondary

search (header), store locator (go button), gift certificate (go button), newsletter sign up button, back buttons in checkout

Tiny

Small

Medium

Large
Purchase Path

more info (product), buy now, add to basket, checkout button (minicart), login buttons, checkout buttons (continue, pay securely now etc)

Tiny

Small

Medium

Large
Alert

alert button using sitewide alert colour

Tiny

Small

Medium

Large

Apply these styles to button, input type="submit" or a

Regular Button

Additional Buttons

Venda have extended the button classes to add extra buttons using different colours.

Primary highlight

highlighted standard button

Tiny

Small

Medium

Large
Tertiary

mobile nav

Tiny

Small

Medium

Large
Quaternary

search

Tiny

Small

Medium

Large

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