NavigationFootersQuotesCTAsSaved sections

Style guide

This page is used to catalog symbols and components to be reused, and can also be used to house deprecated sections or content.
⚡ When using custom CSS classes in HTML Embed elements, copy an element onto this page, using the custom class. This will prevent the class from being deleted when cleaning up unused styles in the Style Manager.
💾 This style guide page should be saved as a Draft at all times, in order to keep it hidden from the public.
Footer symbol
Quote block symbol

"With Voiceflow we were able to quickly prototype real, personalized, user experiences that would have otherwise required our engineers to build them into production code."

Doug DeMarco

Design Manager, Spotify

Code snippets
▶ In order to add a shorter inline code snippet inside a paragraph, add the following tag just before the snippet:

{% c-line %}

and add the following snippet immediately after the code snippet:

{% c-line-end %}

Styling for inline tags is managed within the Webflow Designer, and can be modified by editing the inline-code span. Click and select the inline-code span to edit.

* Do not use bold styling or line breaks when using inline code snippet tags.

This is a test of an inline code snippet like this: {% c-line %}$('.w-lightbox').click(function(){% c-line-end %}.

▶ This is an example of a code block to be used inside rich text fields or paragraphs. To add syntax highlighting for a code block to rich text, add the following tag before the code block inside the paragraph:

{% c-block language="js" %}

and add the following snippet after the code snippet:

{% c-block-end %}

* You can use SHIFT+SPACE to add non-breaking spaces to indent lines as necessary, and you must use SHIFT+ENTER to add line breaks.

* Do not use bold styling when using code block tags.

This is a test of the highlight.js function.
{% c-block language="js" %}
var Webflow = Webflow || [];
Webflow.push(function() {

  // When a lightbox is clicked
  $('.w-lightbox').click(function() {

    // Get the data-caption attribute from the lightbox
    caption = $(this).data('caption');

    // If caption is missing, do nothing
    if(typeof caption == 'undefined' || caption == '') return;

    // Remove the existing caption (if any)

    // Append the caption into the lightbox after a split second
    setTimeout(function() {
      $('.w-lightbox-figure').append('<figcaption class="w-lightbox-caption">'+caption+'</figcaption>');
    }, 500);


}); // End ready function
{% c-block-end %}

CTA section symbol - 50,000 designers

Join 60,000 designers

Start creating great conversations today
CTA section symbol - Get started free

Get started for FREE

Start creating great conversations today
Templates section

Explore All Templates

From interactive stories to games, business tools, IVRs and more – get started with our wide array of templates with just one click. Connect them to your own data and start customizing today.

Alexa Coming soon
Custom Assistant Coming soon
Google Assistant Coming soon
Mobile App Coming soon
Web Embed Coming soon
IVR System Coming soon
General Assistant Coming soon
In-Car Experience Coming soon
All Channels Coming soon
Use Cases
Health Coming soon
Smart Home Coming soon
Information Coming soon
Lifestyle Coming soon
Education Coming soon
Finance Coming soon
Shopping Coming soon
Utilities Coming soon
Travel Coming soon
Navigation Coming soon
Health & Fitness Coming soon
Reference Coming soon
Personal Development Coming soon
Entertainment Coming soon
Productivity Coming soon
Business Tools Coming soon
Visuals Coming soon
Content / CMS Coming soon
Prototype Only Coming soon
Ready to Launch Coming soon
All Use Cases
Showing # items

Uh oh, doesn't look like there's anything with those search terms.

Clear all filters
Get started with Voiceflow for free
Start creating great conversations today.
Get Started