Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Demo page

This is a playground

To grab the code and see all the modifiers you should refer to the documentation. I promise it's nice.

Also there's some custom and potentially hacky javascript that makes this page work the way it does which I wouldn't want you to copy in your project.

Note: if you're opening this locally instead of through a server, the icons won't appear. This is normal SVG behaviour.

Paragraphs

Small paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Standard paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Large paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Buttons

See Buttons documentation for the full list of options

Text button

Types

Primary buttons
Secondary buttons
Tertiary buttons
Quaternary buttons
Destructive buttons

Application buttons

Primary buttons
Secondary buttons
Tertiary buttons
Quaternary buttons
Destructive buttons

Sizes

Grouped buttons

Grouped Buttons Sizes

See Dropdowns documentation for the full list of options

Sizes
Native dropdown
Basic custom dropdowns
Custom dropdowns with basic 'select' appearance
Visible selection dropdown
Complex dropdowns
I'm a header

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
Header
Header
Header
Cell
Cell
Cell
Cell
Cell
Cell

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
Contact Job title Location
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
Header
Header
Header
Cell
Cell
Cell
Cell
Cell
Cell
Header
Header
Header
Cell
Cell
Cell
Cell
Cell
Cell
Header
Header
Header
Cell
Cell
Cell
Cell
Cell
Cell

Form elements

See Basic tables documentation for the full list of options

Default form elements

I'm a hint
This field is required
This field is required
You were supposed to write things
Composite
Elastic
Form groups
Please enter a start date
Stretched form group
Form grid

Big form elements

I'm a hint
This field is required
This field is required
Composite
Form grid

Checkboxes and Radio buttons

See Checkboxes and Radios documentation for the full list of options

This field is required
This field is required
Layout options

Switches

See Switches documentation for the full list of options

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

It's nice to share knowledge

We changed the terms and conditions

Just kidding

We changed the terms and conditions

Learn more

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

Note:It's nice to share knowledge

We changed the terms and conditions

Just kidding

There's something we wanna let you know

There's something we wanna let you know

Nice job!

Something really good happened

Something really good happened

Something really good happened

Ehm...

Something needs your attention

Something needs your attention

Something needs your attention

OMG

The horror, the horror...

The horror, the horror...

The horror, the horror...

Flashes

It's nice to share knowledge

It's nice to share knowledge

Tooltips

See Tooltips documentation for the full list of options

Badges

See Badges documentation for the full list of options

Basic badges
20
I'm a blue badge
I'm a blue badge
20
I'm a green badge
I'm a green badge
20
I'm a yellow badge
I'm a yellow badge
20
I'm a red badge
I'm a red badge
20
I'm a grey badge
I'm a grey badge

20
I'm a blue badge
I'm a blue badge
20
I'm a green badge
I'm a green badge
20
I'm a yellow badge
I'm a yellow badge
20
I'm a red badge
I'm a red badge
20
I'm a grey badge
I'm a grey badge
Dismissable badges
I'm a blue badge
I'm a blue badge
I'm a green badge
I'm a green badge
I'm a yellow badge
I'm a yellow badge
I'm a red badge
I'm a red badge
I'm a grey badge
I'm a grey badge

I'm a blue badge
I'm a blue badge
I'm a green badge
I'm a green badge
I'm a yellow badge
I'm a yellow badge
I'm a red badge
I'm a red badge
I'm a grey badge
I'm a grey badge
Combined badges
Department
Sales
Status
Pending
Groups of badges
Charizard
Pikachu
Bulbasaur
Jigglypuff
Chikorita
Kyogre
Parsley
Sage
Rosemary
Thyme

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

I'm separating
I'm separating
I'm separating

Modals

See Modal documentation for the full list of options

Modal title

Literaly anything you want The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

1914 translation by H. Rackham "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"

Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

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

See Spinners documentation for the full list of options

Bla
Bla
Bla
Bla
Bla
Bla

Dialpad

See the Dialpad documentation for the full list of options

Basic dialpad

Outbound ID: (201) 555-2345
1
2
abc
3
def
4
ghi
5
jkl
6
mno
7
pqrw
8
tuv
9
wxyz
0
+

Dialpad with '--noshadow'

Outbound ID: (201) 555-2345
1
2
abc
3
def
4
ghi
5
jkl
6
mno
7
pqrw
8
tuv
9
wxyz
0
+

Dialpad with '--nobg', '--noshadow' and '--border'

 
Outbound ID: (201) 555-2345
1
2
abc
3
def
4
ghi
5
jkl
6
mno
7
pqrw
8
tuv
9
wxyz
0
+
 

Light dialpad

 
Outbound ID: (201) 555-2345
1
2
abc
3
def
4
ghi
5
jkl
6
mno
7
pqrw
8
tuv
9
wxyz
0
+

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-1of2

Lists

  • Bla
  • Bla
  • Bla
    • Bla
    • Bla
    • Bla
      • Bla
      • Bla
      • Bla
  1. Bla
  2. Bla
  3. Bla
    1. Bla
    2. Bla
    3. Bla
      1. Bla
      2. Bla
      3. Bla
  1. Bla
  2. Bla
  3. Bla
    1. Bla
    2. Bla
    3. Bla

Numbers

ABC ABC ABC

Sandbox