Dropdowns
See Dropdowns documentation for the full list of options
Sizes
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
Native dropdown
Basic custom dropdowns
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
Custom dropdowns with basic 'select' appearance
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
Visible selection dropdown
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
Complex dropdowns
This is a dropdown menu
This block just has the right padding and (removable) border
This is a dropdown menu
This block just has the right padding and (removable) border
Basic tables
See Basic tables documentation for the full list of options
| Contact | Job title | Location | Actions |
|---|---|---|---|
| Ken | User Experience Director | New York | |
| Matt | UX Designer | New Jersey | |
| Benny | Senior UX Designer | London |
| Contact | Job title | Location | |
|---|---|---|---|
| Ken | User Experience Director | New York | |
| Matt | UX Designer | New Jersey | |
| Benny | Senior UX Designer | London |
Non-traditional tables
Data tables
See Data tables documentation for the full list of options
| Contact | Job title | Location | Actions |
|---|---|---|---|
| Ken | User Experience Director | New York | |
| Matt | UX Designer | New Jersey | |
| Benny | Senior UX Designer | London |
Table with numbers, lines, colored statuses and footer
| Network | Type | Price | Status | Number |
|---|---|---|---|---|
| Vodafone | Landline | €125.30 | Delivered | 447777998834 |
| O2 | Landline | €34.00 | Pending | 3344488922 |
| Three | Mobile | €5.47 | Declined | 36999000948 | €164.77 |
Dark table
| Network | Type | Price |
|---|---|---|
| Vodafone | Landline | €125.30 |
| O2 | Landline | €34.00 |
| Three | Mobile | €5.47 | €164.77 |
Teal table
| Network | Type | Price |
|---|---|---|
| Vodafone | Landline | €125.30 |
| O2 | Landline | €34.00 |
| Three | Mobile | €5.47 | €164.77 |
Non-traditional tables
Form elements
See Basic tables documentation for the full list of options
Default form elements
Composite
- +39
- +1
- +33
Elastic
Form groups
Stretched form group
Form grid
Big form elements
Composite
- +39
- +1
- +33
Form grid
Checkboxes and Radio buttons
See Checkboxes and Radios documentation for the full list of options
Layout options
Switches
Callouts
See Callouts documentation for the full list of options
Basic
Note
It's nice to share knowledge
Note:It's nice to share knowledge
We changed the terms and conditions
Just kidding
There's something we wanna let you know
Nice job!
Something really good happened
Something really good happened
Ehm...
Something needs your attention
Something needs your attention
OMG
The horror, the horror...
The horror, the horror...
With button
Note
It's nice to share knowledge
We changed the terms and conditions
Just kidding
Nice job!
Something really good happened
Ehm...
Something needs your attention
OMG
The horror, the horror...
Dismissable
Note
It's nice to share knowledge
Note:It's nice to share knowledge
We changed the terms and conditions
Just kidding
There's something we wanna let you know
Nice job!
Something really good happened
Something really good happened
Ehm...
Something needs your attention
Something needs your attention
OMG
The horror, the horror...
The horror, the horror...
Flashes
It's nice to share knowledge
It's nice to share knowledge
Tooltips
Badges
See Badges documentation for the full list of options
Basic badges
Dismissable badges
Combined badges
Groups of badges
Cards
See Cards documentation for the full list of options
Basic card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
With border
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
With border and background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
With background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Plain
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Smaller header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Smallest header, border and background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header and less padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Footer and lesspadding
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Short footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header and a footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Smaller header, footer and lesspadding
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header, footer and scrollable content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header, footer, scrollable content and lesspadding
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon, smaller header and lesspadding
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Image card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Image card with footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Image card lesspadding and icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Image card with footer and lesspadding and icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Patterns
Grid card
Lorem ipsum dolor sit amet
Tech card
Lorem ipsum dolor sit amet
App card
Lorem ipsum dolor sit amet
Text separators
See Text separators documentation for the full list of options
Modals
See Modal documentation for the full list of options
Modal title
Modal title
Accordions
See Accordions documentation for the full list of options
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis.
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis. Cras euismod est mi, sed tempor libero vehicula placerat.
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis.
Section One
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis.
Section Two
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis. Cras euismod est mi, sed tempor libero vehicula placerat.
Section Three
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis.
Section One
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis.
Section Two
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis. Cras euismod est mi, sed tempor libero vehicula placerat.
Section Three
Duis tempor tincidunt metus, eu bibendum tellus pulvinar id. Nam dignissim, justo quis lobortis consectetur, dolor diam suscipit lorem, consectetur elementum augue est sed eros.
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis.
Click me, I'm a JS-only accordion
Aliquam feugiat mi sit amet risus laoreet, ultrices lobortis tellus sollicitudin. Nulla auctor pulvinar tellus, auctor viverra purus sollicitudin in. Proin eget ligula erat. Nunc porta ipsum in dolor lobortis facilisis.
Spinners
Dialpad
See the Dialpad documentation for the full list of options
Basic dialpad
Dialpad with '--noshadow'
Dialpad with '--nobg', '--noshadow' and '--border'
Light dialpad
Code snippets
See Code snippets with Prism.js documentation for the full list of options
Keep tags
$message = $client->message()->send([
'to' => TO_NUMBER, // This is bold
'from' => 'Acme Inc', // This is italics
'text' => 'A text message sent using the Nexmo SMS API'
]);
Line numbers
<div class="Vlt-grid">
<div class="Vlt-col">
<!-- First column content -->
</div>
<div class="Vlt-col">
<!-- Second column content -->
</div>
</div>
Colors and languages
Light
Javascript
const onInput = (request, response) => {
const dtmf = request.body.dtmf
const ncco = [{
action: 'talk',
text: `You pressed ${dtmf}`
}]
response.json(ncco)
}
Java
/*
* Route to answer incoming calls.
*/
Route answerRoute = (req, res) -> {
TalkNcco intro = new TalkNcco("Hello. Please press any key to continue.");
InputNcco input = new InputNcco();
input.setEventUrl(String.format("%s://%s/webhooks/dtmf", req.scheme(), req.host()));
input.setMaxDigits(1);
Ncco[] nccos = new Ncco[]{intro, input};
res.type("application/json");
// com.fasterxml.jackson.databind.ObjectMapper;
return new ObjectMapper().writer().writeValueAsString(nccos);
};
PHP
$app->post('/webhooks/dtmf', function (Request $request, Response $response) {
$params = $request->getParsedBody();
$ncco = [
[
'action' => 'talk',
'text' => 'You pressed '.$params['dtmf']
]
];
return $response->withJson($ncco);
});
Python
@app.route("/webhooks/dtmf", methods=['POST'])
def inout_webhook():
data = request.get_json()
pprint(data)
ncco =[
{
"action": "talk",
"text": "You pressed {}, goodbye".format(data['dtmf'])
}
]
return jsonify(ncco)
.NET
var results = client.SMS.Send(request: new SMS.SMSRequest
{
from = "Acme Inc",
to = TO_NUMBER,
text = "A test SMS sent using the Nexmo SMS API"
});
cURL (bash)
curl -X "POST" "https://rest.nexmo.com/sms/json" \
-d "from=Acme Inc" \
-d "text=A text message sent using the Nexmo SMS API" \
-d "to=TO_NUMBER" \
-d "api_key=NEXMO_API_KEY" \
-d "api_secret=NEXMO_API_SECRET"
Ruby
client.sms.send(
from: 'Acme Inc',
to: RECIPIENT_NUMBER,
text: 'A text message sent using the Nexmo SMS API'
)
HTML
<!-- The wrapper holds the logic that makes the layout work -->
<div class="Vlt-form__element Vlt-form__element--big">
<div class="Vlt-input">
<!-- The input MUST have a placeholder=" " (can be a space) -->
<input id="example" type="text" placeholder="email@example.com" />
<!-- The label MUST have a for="" linked to the input -->
<label for="example">Email</label>
</div>
<!-- This is where hints or form errors go -->
<small class="Vlt-form__element__hint">I\'m a hint</small>
<small class="Vlt-form__element__error">This field is required</small>
</div>
Dark
Javascript
const onInput = (request, response) => {
const dtmf = request.body.dtmf
const ncco = [{
action: 'talk',
text: `You pressed ${dtmf}`
}]
response.json(ncco)
}
Java
/*
* Route to answer incoming calls.
*/
Route answerRoute = (req, res) -> {
TalkNcco intro = new TalkNcco("Hello. Please press any key to continue.");
InputNcco input = new InputNcco();
input.setEventUrl(String.format("%s://%s/webhooks/dtmf", req.scheme(), req.host()));
input.setMaxDigits(1);
Ncco[] nccos = new Ncco[]{intro, input};
res.type("application/json");
// com.fasterxml.jackson.databind.ObjectMapper;
return new ObjectMapper().writer().writeValueAsString(nccos);
};
PHP
$app->post('/webhooks/dtmf', function (Request $request, Response $response) {
$params = $request->getParsedBody();
$ncco = [
[
'action' => 'talk',
'text' => 'You pressed '.$params['dtmf']
]
];
return $response->withJson($ncco);
});
Python
@app.route("/webhooks/dtmf", methods=['POST'])
def inout_webhook():
data = request.get_json()
pprint(data)
ncco =[
{
"action": "talk",
"text": "You pressed {}, goodbye".format(data['dtmf'])
}
]
return jsonify(ncco)
.NET
var results = client.SMS.Send(request: new SMS.SMSRequest
{
from = "Acme Inc",
to = TO_NUMBER,
text = "A test SMS sent using the Nexmo SMS API"
});
cURL (bash)
curl -X "POST" "https://rest.nexmo.com/sms/json" \
-d "from=Acme Inc" \
-d "text=A text message sent using the Nexmo SMS API" \
-d "to=TO_NUMBER" \
-d "api_key=NEXMO_API_KEY" \
-d "api_secret=NEXMO_API_SECRET"
Ruby
client.sms.send(
from: 'Acme Inc',
to: RECIPIENT_NUMBER,
text: 'A text message sent using the Nexmo SMS API'
)
HTML
<!-- The wrapper holds the logic that makes the layout work -->
<div class="Vlt-form__element Vlt-form__element--big">
<div class="Vlt-input">
<!-- The input MUST have a placeholder=" " (can be a space) -->
<input id="example" type="text" placeholder="email@example.com" />
<!-- The label MUST have a for="" linked to the input -->
<label for="example">Email</label>
</div>
<!-- This is where hints or form errors go -->
<small class="Vlt-form__element__hint">I\'m a hint</small>
<small class="Vlt-form__element__error">This field is required</small>
</div>
Icons
See the Icons documentation for the full list of options and implementation instructions
Brand icons
Flag icons
Steps
Titles
See the Typography documentation for the full list of options
Title
Title
Title
Title
Title
Title
Title
Title
Title
Title
Title code
Title code
Title code
Title code
Tabs
See Tabs documentation for the full list of options
I'm a tab
I'm also a tab
I'm an inaccessible tab becayse my link is disabled
I'm a tab
I'm also a tab
I'm an inaccessible tab becayse my link is disabled
I'm a tab
I'm also a tab
I'm an inaccessible tab becayse my link is disabled
I'm a tab
I'm also a tab
I'm an inaccessible tab becayse my link is disabled
I'm a tab
I'm also a tab
I'm an inaccessible tab becayse my link is disabled
I'm a tab
I'm also a tab
I'm an inaccessible tab becayse my link is disabled
Grid
.Vlt-grid.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2.Vlt-col
.Vlt-col--1of4
.Vlt-col--M-1of3
.Vlt-col--S-1of2Lists
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
- Bla
Numbers
ABC ABC ABC
Sandbox
- Option 1
- Option 2
- Option 3