Heading

Styleguide
Source of truth of this template.
Headings
Heading Jumbo
Heading Jumbo
subheading caps

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraphs & Links

Paragraph-bigger

Paragraph

Paragraph-de-emphasized

Paragraph-smaller

Paragraph-tiny

Label
A text link
Buttons & Form Elements
Rich Text Element

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.
var allQuestions = [{ question: "Who is Prime Minister of the United Kingdom?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: "Winston Churchill" }, { question: "Who is President of the USA?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: "David Cameron" }, { question: "Who is Prime Minister of Russia?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: "Gordon Brown" }, { question: "Who is Prime Minister of Uganda?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: "Tony Blair" }, { question: "Who is Prime Minister of Brazil", choices: ["Jim Babbit", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: "Tony Blair" }, { question: "Who is Prime Minister of Lithuania?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: "Tony Blair" }, { question: "Who is Prime Minister of Israel?", choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: "Tony Blair" }]; var Quiz = { count: 0, correctAnswerCount: 0, showQuestion: function() { $('.questions').html(''); //clear question $('.choices').html(''); //clear answers $('.correct-answers').html(''); //clear correct answers $('.next-button').text('Next Question').removeClass('btn-success'); if (this.count < allQuestions.length) { var question = allQuestions[this.count].question; var id = 1; $('.questions').prepend('

' + question + '

'); allQuestions[this.count].choices.forEach(function(choice) { if (id === 1) $('.choices').append('
'); else $('.choices').append('
'); id++; }); } else { $('.correct-answers').html(this.correctAnswerCount + ' / ' + allQuestions.length + ' answered correctly!'); $('.next-button').text('Start Over').addClass('btn-success'); this.count = 0; this.correctAnswerCount = 0; } }, checkAnswer: function(answer) { if (answer && answer === allQuestions[this.count].correctAnswer) this.correctAnswerCount += 1; this.count += 1; } }; $(function() { //show first question Quiz.showQuestion(); //event listener $('.next-button ').on('click', function() { var answer = $('input[name="optionsRadios"]:checked').val(); Quiz.checkAnswer(answer); Quiz.showQuestion(); }); });

Webflow Example Quiz

Questions

Results