Github GitLab NPM Package
Logout

HTML controls

Form input

Cosmo provides a well-crafted design for your form controls, see the demos below.

Show code sample 
<div class="cosmo-input__group">
    <label for="textInput" class="cosmo-label">Text input</label>
    <input type="text" id="textInput" class="cosmo-input"/>
    <label for="textInputDisabled" class="cosmo-label">Text input disabled</label>
    <input type="text" id="textInputDisabled" disabled class="cosmo-input"/>
    <label for="textInputInvalid" class="cosmo-label">Text input invalid</label>
    <input type="text" id="textInputInvalid" required class="cosmo-input"/>
    <label for="rangeInput" class="cosmo-label">Range input</label>
    <input type="range" id="rangeInput" class="cosmo-input"/>
    <label for="rangeInputDisabled" class="cosmo-label">Range input disabled</label>
    <input type="range" id="rangeInputDisabled" class="cosmo-input" disabled/>
    <label for="rangeInputDisabled" class="cosmo-label">Range input invalid</label>
    <input type="range" id="rangeInputDisabled" class="cosmo-input is--invalid"/>
    <label for="select" class="cosmo-label">Select</label>
    <select id="select" class="cosmo-select">
        <option value="1" selected>Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    <label for="selectDisabled" class="cosmo-label">Select disabled</label>
    <select id="selectDisabled" class="cosmo-select" disabled>
        <option value="1" selected>Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    <label for="selectInvalid" class="cosmo-label">Select invalid</label>
    <select id="selectInvalid" class="cosmo-select" required>
        <option value="" disabled selected>Please choose</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    <label for="textarea" class="cosmo-label is--textarea">Textarea</label>
    <textarea id="textarea" class="cosmo-textarea"></textarea>
    <label for="textareaDisabled" class="cosmo-label is--textarea">Textarea disabled</label>
    <textarea id="textareaDisabled" disabled class="cosmo-textarea"></textarea>
    <label for="textareaInvalid" class="cosmo-label is--textarea">Textarea invalid</label>
    <textarea id="textareaInvalid" required class="cosmo-textarea"></textarea>
    <div class="cosmo-input__group is--checkbox">
        <input type="checkbox" id="checkboxInput" class="cosmo-checkbox"/>
        <label for="checkboxInput">Checkbox input</label>
        <input type="checkbox" id="checkboxInputDisabled" class="cosmo-checkbox" disabled/>
        <label for="checkboxInputDisabled">Checkbox input disabled</label>
        <input type="checkbox" id="checkboxInputDisabledChecked" class="cosmo-checkbox" disabled checked/>
        <label for="checkboxInputDisabledChecked">Checkbox input disabled</label>
        <input type="checkbox" id="checkboxInputInvalid" class="cosmo-checkbox" required/>
        <label for="checkboxInputInvalid">Checkbox input invalid</label>
    </div>
    <div class="cosmo-input__group is--switch">
        <input type="checkbox" id="switchInput" class="cosmo-switch"/>
        <label for="switchInput">Switch input</label>
        <input type="checkbox" id="switchInputDisabled" class="cosmo-switch" disabled/>
        <label for="switchInputDisabled">Switch input disabled</label>
        <input type="checkbox" id="switchInputDisabledChecked" class="cosmo-switch" disabled checked/>
        <label for="switchInputDisabledChecked">Switch input disabled</label>
        <input type="checkbox" id="switchInputInvalid" class="cosmo-switch" required/>
        <label for="switchInputInvalid">Switch input invalid</label>
    </div>
    <label class="cosmo-label is--radio">Radios</label>
    <div class="cosmo-input__group is--radio">
        <input name="radio" type="radio" id="radioInput1" class="cosmo-radio" required/>
        <label for="radioInput1">Radio input 1</label>
        <input disabled name="radio" type="radio" id="radioInput2" class="cosmo-radio"/>
        <label for="radioInput2">Radio input 2</label>
        <input name="radio" type="radio" id="radioInput3" class="cosmo-radio"/>
        <label for="radioInput3">Radio input 3</label>
    </div>
    <div class="cosmo-input__group is--radio">
        <input name="radio2" type="radio" id="radioInput4" class="cosmo-radio" required/>
        <label for="radioInput4">Radio input 4</label>
        <input disabled checked name="radio2" type="radio" id="radioInput5" class="cosmo-radio"/>
        <label for="radioInput5">Radio input 5</label>
        <input name="radio2" type="radio" id="radioInput6" class="cosmo-radio"/>
        <label for="radioInput6">Radio input 6</label>
    </div>
</div>

Size variations

Cosmo form inputs come in four different size variations. Small, medium, large, and the default auto size which fills the parent container.

Show code sample 
<div class="cosmo-input__group">
	<label for="textInputSmall" class="cosmo-label">Text input small</label>
	<input type="text" id="textInputSmall" class="cosmo-input is--small" />
	<label for="textInputMedium" class="cosmo-label">Text input medium</label>
	<input type="text" id="textInputMedium" class="cosmo-input is--medium" />
	<label for="textInputLarge" class="cosmo-label">Text input large</label>
	<input type="text" id="textInputLarge" class="cosmo-input is--large" />
	<label for="textInputNormal" class="cosmo-label">Text input default (auto size)</label>
	<input type="text" id="textInputNormal" class="cosmo-input" />
	<label for="rangeInputSmall" class="cosmo-label">Range input small</label>
	<input type="range" id="rangeInputSmall" class="cosmo-input is--small" />
	<label for="rangeInputMedium" class="cosmo-label">Range input medium</label>
	<input type="range" id="rangeInputMedium" class="cosmo-input is--medium" />
	<label for="rangeInputLarge" class="cosmo-label">Range input large</label>
	<input type="range" id="rangeInputLarge" class="cosmo-input is--large" />
	<label for="rangeInputNormal" class="cosmo-label">Range input default (auto size)</label>
	<input type="range" id="rangeInputNormal" class="cosmo-input" />
	<label for="selectSmall" class="cosmo-label">Select small</label>
	<select id="selectSmall" class="cosmo-select is--small">
		<option value="1" selected>Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
	<label for="selectMedium" class="cosmo-label">Select medium</label>
	<select id="selectMedium" class="cosmo-select is--medium">
		<option value="1" selected>Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
	<label for="selectLarge" class="cosmo-label">Select large</label>
	<select id="selectLarge" class="cosmo-select is--large">
		<option value="1" selected>Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
	<label for="selectNormal" class="cosmo-label">Select default (auto size)</label>
	<select id="selectNormal" class="cosmo-select">
		<option value="1" selected>Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
	<label for="textareaSmall" class="cosmo-label is--textarea">Textarea small</label>
	<textarea id="textareaSmall" class="cosmo-textarea is--small"></textarea>
	<label for="textareaMedium" class="cosmo-label is--textarea">Textarea medium</label>
	<textarea id="textareaMedium" class="cosmo-textarea is--medium"></textarea>
	<label for="textareaLarge" class="cosmo-label is--textarea">Textarea large</label>
	<textarea id="textareaLarge" class="cosmo-textarea is--large"></textarea>
	<label for="textareaNormal" class="cosmo-label is--textarea">Textarea default (auto size)</label>
	<textarea id="textareaNormal" class="cosmo-textarea"></textarea>
</div>

File upload

Cosmo CSS supports custom styling for file inputs, which makes it super easy by only applying the cosmo-input class to the file input.

Show code sample 
<div class="cosmo-input__group">
    <label for="fileInput" class="cosmo-label">File input</label>
    <input type="file" id="fileInput" class="cosmo-input"/>
    <label for="fileInputDisabled" class="cosmo-label">File input disabled</label>
    <input type="file" id="fileInputDisabled" class="cosmo-input"/>
</div>

Size variations

Show code sample 
<div class="cosmo-input__group">
    <label for="fileInputSmall" class="cosmo-label">File input small</label>
    <input id="fileInputSmall" type="file" class="cosmo-input is--small"/>
    <label for="fileInputMedium" class="cosmo-label">File input medium</label>
    <input id="fileInputMedium" type="file" class="cosmo-input is--medium"/>
    <label for="fileInputLarge" class="cosmo-label">File input large</label>
    <input id="fileInputLarge" type="file" class="cosmo-input is--large"/>
    <label for="fileInputNormal" class="cosmo-label">File input default (auto size)</label>
    <input id="fileInputNormal" type="file" class="cosmo-input"/>
</div>

Picker

Not all modal pickers you want to show are file pickers. Maybe you have in-app media management and want to give your users the option to pick a file from that collection. Cosmo CSS offers a special picker component that mimics a file input but allows a custom action.

Show code sample 
<div class="cosmo-input__group">
    <label for="customPicker" class="cosmo-label">Custom picker</label>
    <button data-picker="Choose image…" id="customPicker" type="button" class="cosmo-input is--picker">
        No image selected
    </button>
    <label for="customPickerDisabled" class="cosmo-label">Custom picker disabled</label>
    <button disabled data-picker="Choose image…" id="customPickerDisabled" type="button" class="cosmo-input is--picker">
        No image selected
    </button>
</div>

Size variations

Show code sample 
<div class="cosmo-input__group">
    <label for="fileInputSmall" class="cosmo-label">File input small</label>
    <input id="fileInputSmall" type="file" class="cosmo-input is--small"/>
    <label for="fileInputMedium" class="cosmo-label">File input medium</label>
    <input id="fileInputMedium" type="file" class="cosmo-input is--medium"/>
    <label for="fileInputLarge" class="cosmo-label">File input large</label>
    <input id="fileInputLarge" type="file" class="cosmo-input is--large"/>
    <label for="fileInputNormal" class="cosmo-label">File input default (auto size)</label>
    <input id="fileInputNormal" type="file" class="cosmo-input"/>
</div>

Validation

Cosmo provides styling for the built-in browser validation. Apart from that you can apply the is--invalid class to any input element to render it invalid. Remember to remove that class when the user types a valid value.

Apart from simple indication if a field is invalid, you can also display a message to the user. This message automatically aligns below the form control and supports four different states.

This value looks good to me This value is bad, please provide a different one Heads up, this value might behave strangely This is going to be the way you log in
Show code sample 
<div class="cosmo-input__group">
    <label for="textInput" class="cosmo-label">Positive message</label>
    <input type="text" id="textInput" class="cosmo-input"/>
    <span class="cosmo-input__message is--positive">This value looks good to me</span>
    <label for="textInput" class="cosmo-label">Negative message</label>
    <input type="text" id="textInput" class="cosmo-input"/>
    <span class="cosmo-input__message is--negative">This value is bad, please provide a different one</span>
    <label for="textInput" class="cosmo-label">Warning message</label>
    <input type="text" id="textInput" class="cosmo-input"/>
    <span class="cosmo-input__message is--warning">Heads up, this value might behave strangely</span>
    <label for="textInput" class="cosmo-label">Information message</label>
    <input type="text" id="textInput" class="cosmo-input"/>
    <span class="cosmo-input__message is--information">This is going to be the way you log in</span>
</div>

Buttons

Cosmo CSS consists of only two types of buttons. The first type is a classical button just like you know it from your operating system or other frameworks.

Normal state

Disabled state

Show code sample 
<h4>Normal state</h4>
<button class="cosmo-button is--primary">Primary Button</button>
<button class="cosmo-button is--negative">Negative Button</button>
<button class="cosmo-button is--positive">Positive Button</button>
<button class="cosmo-button is--warning">Warning Button</button>
<button class="cosmo-button is--information">Information Button</button>
<button class="cosmo-button">Standard Button</button>

<h4>Disabled state</h4>
<button disabled class="cosmo-button is--primary">Primary Button</button>
<button disabled class="cosmo-button is--negative">Negative Button</button>
<button disabled class="cosmo-button is--positive">Positive Button</button>
<button disabled class="cosmo-button is--warning">Warning Button</button>
<button disabled class="cosmo-button is--information">Information Button</button>
<button disabled class="cosmo-button">Standard Button</button>

Circular button

The other button type is circular buttons; they come in three sizes, small, medium, and large. Medium is the default size and doesn't require any extra classes. They’re best combined with an icon, just as seen in the example below.

Size variations

Type variations

Disabled state

Show code sample 
<h4>Size variations</h4>
<button class="cosmo-button is--circle is--small">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>
<button class="cosmo-button is--circle">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>
<button class="cosmo-button is--circle is--large">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>
<h4>Type variations</h4>
<button class="cosmo-button is--circle is--primary">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>
<button class="cosmo-button is--circle is--positive">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>
<button class="cosmo-button is--circle is--negative">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>
<button class="cosmo-button is--circle is--warning">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>
<button class="cosmo-button is--circle is--information">
	<svg viewBox="0 0 24 24">
		<path
            d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z"
            fill="currentColor"
		/>
	</svg>
</button>

Progress

The HTML 5 progress tag can be used to display a progress bar on the web.

Size variations



Type variations






Show code sample 
<h4>Size variations</h4>
<progress class="cosmo-progress-bar is--small" value="13" max="100"></progress><br/>
<progress class="cosmo-progress-bar" value="13" max="100"></progress><br/>
<progress class="cosmo-progress-bar is--large" value="13" max="100"></progress>
<h4>Type variations</h4>
<progress class="cosmo-progress-bar" value="13" max="100"></progress><br/>
<progress class="cosmo-progress-bar is--positive" value="54" max="100"></progress><br/>
<progress class="cosmo-progress-bar is--negative" value="61" max="100"></progress><br/>
<progress class="cosmo-progress-bar is--warning" value="28" max="100"></progress><br/>
<progress class="cosmo-progress-bar is--information" value="36" max="100"></progress><br/>

Indeterminate state

As of version 0.12.0 Cosmo supports the indeterminate state of progress bars.

Size variations



Type variations






Show code sample 
<progress class="cosmo-progress-bar"></progress>

Messages

Cosmo CSS provides four types of messages to display information to your user, information, warning, positive and negative

Information

I’m just information, don't worry about me

Warning

I’m a warning message, keep your eyes open and check before you click

Positive

I’m a positive message, something worked or is a good thing to do

Negative

I’m a negative message, something doesn't work or is dangerous to do

Show code sample 
<div class="cosmo-message is--information">
	<span class="cosmo-message__header">Information</span>
	<p class="cosmo-message__message">I’m just information, don't worry about me</p>
</div>
<div class="cosmo-message is--warning">
	<span class="cosmo-message__header">Warning</span>
	<p class="cosmo-message__message">
		I’m a warning message, keep your eyes open and check before you click
	</p>
</div>
<div class="cosmo-message is--positive">
	<span class="cosmo-message__header">Positive</span>
	<p class="cosmo-message__message">
		I’m a positive message, something worked or is a good thing to do
	</p>
</div>
<div class="cosmo-message is--negative">
	<span class="cosmo-message__header">Negative</span>
	<p class="cosmo-message__message">
		I’m a negative message, something didn't work or is dangerous to do
	</p>
</div>