Buttons

Buttons communicate to the user a choice of actions and assign these to a clear hierachy.
Primary Buttons
They may display a label, an icon, or both. Flat buttons and Ghost buttons are the most commonly used types. The label should brief description of the desired action, no more then two words. Buttons are available in black, white and the primary brand colors. Only mix button types when you have a good reason to, such as emphasizing an important function.
Button Sizes
  • Small button at a base font size of 0.75rem/12px px, e.g. in a smartphone app.
  • Medium sized button at a base font size of 0.8125rem/13px, e.g. in a tablet app.
  • Large button at a base font size of 0.875rem/14px, e.g. on a website which is rendered in a wide viewport.
Buttons
Buttons are a very important UI components, we value consistency in Valmont interfaces. The primary button is a fill button and is used to show the primary action. Ghost buttons are used to display secondary actions.
Primary Button
Type: Primary Button
Class: .btn--primary
Primary Button
Type: Black Button
Class: .btn--black
Primary Button
Type: Brown Button
Class: .btn--brown
Secondary Button
Type: Blue Outline Button
Class: .btn--out-blue
Secondary Button
Type: Black Outline Button
Class: .btn--out-black
Secondary Button
Type: Brown Outline Button
Class: .btn--out-brown
Blue Text Button
Type: Blue Text Button
Class: .btn--txt-blue
Grey Text Button
Type: Grey Text Button
Class: .btn--txt-grey
Inline button online.
Type: Inline button
Class: .u
Full-Width Button
Full-width primary button can be used for the most important function of a page or view. Unlike the primary button, the button will bleed to the edge of a viewport. It is used primarily for small or mobile viewports.
Button Group
Buttons groups offer multiple actions alongside each other. The number of buttons should be easy for the user to grasp. The primary action should be emphasised with the primary button in order to guide the user. Only one primary button is used per group, but this can be combined with several other secondary ghost buttons.

Inputs

Input components are mixed and grouped as required to create a form structure. Forms should be designed simply and clearly with as few information points as possible for users to accomplish their goals.
Text fields
Text field components enable users to provide information on a single line of text. Text fields can vary in width and consist of a label and a line. When the text field initiated, the label anmiates upward, and reduces in size and leaves space for the user to enter information. Text fields can be used to capture certain data formats such as numbers, e-mail addresses or passwords and are declared accordingly.
Pick an option, any option...
You choose correctly!
Addons - Text field with button
Addons are achieved by using an .input-group which may include one .input-group--btn after the input, to append text. Addons have no set width, so you can add any text you'de like.
Multiple-line text fields
Multiple-line text fields can hold any amount of text and in doing so grow in height ahead of the user’s entries. The text quantity can be limited to a maximum number of characters. The label text will appear outside a finely drawn frame.
Selection Fields
Selection fields show a number options from a list in a dropdown. Selection fields provide an elegant means to display four or more choices in a list. They can be grouped by means of labels.
Checkboxes
Checkboxes are a common way to give users a means to make a choice out of a range of selections. Each checkbox is given a label. They commonly have been used for users to indicate they agree to specific terms and services.

Modals

We use modals heavily throughout the product to help users focus on single-tasks. Modals should maintain a consistent style to provide a unified experience for users.
Primary modals
Modals are applied to shift the user’s attention to information and interactions without distracting from the current process. We have two types of Modal window our default modal window and a fixed bottom-right modal window. It is not possible to interact with the background until the model is closed by completing or cancelling the task shown.

Center Aligned with Flexbox

Ut sed congue massa. Cras eu turpis lacinia, ultricies ipsum fermentum, consectetur ipsum. Integer vestibulum a nunc noipsum. Integer vestibulum a nunc non facilisis.

Demo Modal Fixed Modal
Click a button to activate a modal.
Navigation provides links to the main areas of an app or a website. In large viewports, navigation usually appears on the top of the screen. In smaller viewports, the navigation may collapse into a condensed version or hidden completely into an icon.
Navigation bar
Tab navigation is a list of options highlighted by means of a rectangular block below the text link to identify which content section is being displayed. In smaller viewports, the tab navigation display will collapse into a dropdown menu.
Left justified navigation bar
Centered navigation bar
Selector
Selectors are similar to navigation tabs, users can choose one option from a list of 3 or less.
Nunc rutrum porta lorem, sollicitudin ultricies justo varius non. Etiam rutrum sed purus a sodales. Vestibulum ac consequat mauris. Mauris non nisi id nunc gravida consequat vestibulum pellentesque ligula. Fusce facilisis quis odio sed euismod. Nunc feugiat varius risus, eu pretium tortor dictum a. Morbi in consectetur quam, id elementum metus. Vivamus ultricies leo mi, ac pellentesque dui elementum ac. Donec scelerisque, enim eget bibendum semper, leo sem rutrum est, non iaculis mauris est ut lectus. Maecenas sagittis ullamcorper lorem, non tempus magna faucibus vitae.
Pagination
Use pagination to allow navigation between pages that represent a collection of items.

Pagination option 1

Pagination option 2

Slider

The slider component is an interactive element a user can engage with to select a value on a given scale.
Primary slider
It is displayed as a horizontal track with a label on one side and a value indicator on the other side. A slider handle is dragged to one end or the other to make a choice, indicating the current value. Sliders are available in black, white and the brands primary color.
Set your budget

Tooltip

Tooltips contain supplemental content when a users engages a specific UI component.
Inline tooltip
Tooltips are used to offer additional text information for an element. Tooltips appear on mouseover and are not initially hidden. They can appear from any side as required. The triangular arrow points to the element that the users has activated.
Lorem inline tooltip sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Please use this is a tooltip icon

Loaders

Loaders are used in individual cases when the content and the definable loading progress of the system are to be displayed in a view at the same time.
Progress bars
The continuous progress bar is used in individual cases when the content and the indefinable loading progress of the system are to be displayed in a view at the same time.
Continous spinner
Continuous spinners are used when the loading progress cannot be determined. They indicate to the user by means of a continuous movement that the system is processing the entry.

Accordian

The Accordian shows a vertical list of navigation items and is mainly used as a navigational aid to show/hide in a content area.
Accordian
The navigation items are separated from each other by a fine line. The type, weight, and size can be varied – depending on hierarchy & browser width. If necessary, icons are used in addition to the text.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

Content Card

Cards contain elements and functions on a single topic and can be used as teasers for further content.
Content Cards
They optionally show text, icons, an image or a video, links and triggers – either alone or in combination. The format, size and layout of a card are flexible within the layout structure. Cards can contain the brand colours as defined in the basics.