This is example text.
This is example text.
<body>
<section class="primary">
<section class="secondary">
<button class="btn">
</body>
Our radius system follows a rule where we have increments of .25em. This means that depending on the component we round the edges by using multiplications of .25em.
<article class="example"> </article>
<button type="button" class="button"> Button </button>
<img class="icon"> </img>
'halton'
2em
'halton-regular'
1.5em
'halton-italic'
.5em
<h1> text example <h1>
<h2> text example <h2>
<p> text example <p>
Options
Disabled
Use class="button"for all the buttons
Add class="button recommended" by recommended buttons
Add class="button minor" by minor buttons
Add class="button distructive" by distructive buttons
/* OPTIONS */
<button type="button" class="button recommended">
Recommended
</button>
<button type="button" class="button">
Button
</button>
<button type="button" class="button minor">
Minor
</button>
<button type="button" class="button destructive">
Distructive
</button>
Always use a <label> element when using form groups.
You may change the placeholder text in <placeholder="Example text">
Look at 05.Buttons how you can chance the button color
Don't use an <p> element instead of an <label> for the forms name.
Don't use a forms group without a <label>
/* WITH A BUTTON */
<label for="withButton"> With a button <label>
<div class="form_group">
<input class="form-group_input" id="withButton"
type="text" placeholder="Example text">
<div class="form-group_attachment">
<button type="button" class="button recommended">
Send
</button>
</div>
</div>
/* WITH HELP TEKST */
<label for="withHelpText">With help text</label>
<div class="form_group">
<input class="form-group_input" id="withHelpText"
type="text" placeholder="Example text">
<small class="form-group_help">
This is example text so you can see how it looks.
</small>
</div>
* - Required field
Save changes
Save changes
Always use a <label> element when using forms validations.
You may change the placeholder text in <placeholder="Example text">
Don't use an <p> element instead of an <label> for the forms name.
Don't use a forms validation without a <label>
/* STANDARD */
<label for="defaultState">Standard</label>
<input class="fs-field-group__input" id="defaultState"
type="text" placeholder="Example Text">
/* REQUIRED */
<label for="requiredState">
Required<span class="req">*</span>
</label>
<input class="form-group_input" id="requiredState"
type="text" placeholder="Example text" required>
<p><span class="req">*</span> - Required field</p>
/* VALID */
<label for="validState"> Valid </label>
<div class="form_validation valid">
<input id="validState" type="text"
placeholder="Example text">
<p>Save changes</p>
</div>
/* INVALID */
<label for="invalidState">Invalid</label>
<div class="form_validation invalid">
<input id="invalidState" type="text"
placeholder="Example text">
<p>Save changes</p<
</div>
Always use a <label> element when using forms text field.
You may change the placeholder text in <placeholder="Example text"> <placeholder="Enter your message here">
Don't use an <p> element instead of an <label> for the forms name.
Don't use a forms validation without a <label>
/* TEXT INPUT */
<label for="textInput">Text input</label>
<input class="fs-field-group__input" id="textInput"
type="text" placeholder="Example Text">
/* TEXT FIELD */
<label for="textField">Text field</label>
<textarea id="textField" rows="8" cols="48"
placeholder="Enter your message here"></textarea>
Never use a <label> element when using forms select menu.
<div class="select_container">
<select class="select_box">
<option value=""> Select an option </option>
<option value="first"> Option one </option>
<option value="second"> Option two </option>
<option value="third"> Option three </option>
<option value="fifth"> Option four </option>
<option value="fourth"> Option five </option>
<option value="sixth"> Option six </option>
</select>
</div>
Always use a <label> element under <input> when using forms checkboxes.
You may change the placeholder text in <label>
Make sure you chance the checkbox id and <label> when there are more options
Don't use an <p> element instead of an <label> for the forms name.
Don't use a forms checkbox without a <label>
<ul class="checkbox_container">
<li>
<input class="checkbox_box" name="checkbox" type="checkbox"
id="choiceA" checked>
<label for="choiceA">Choice A</label>
</li>
<li>
<input class="checkbox_box" name="checkbox" type="checkbox"
id="choiceB" checked>
<label for="choiceB">Choice B</label>
</li>
</ul>