Streaming live at 10am (PST)

Blockquote with webflow


How can i create a blockquote ("text text text text text") with webflow? Do i need custom code?




Blockquote is made of two things: the tag <blockquote> and the "cite=" attribute.

So academically it's written like this in HTML:

<blockquote cite="">Here is the content of the quote.</blockquote>

So, you can add this tag to any DIV element in Webflow:

Now you don't need to add a paragraph element inside to add text, simple double click in the DIV and start typing text. You will get this exact code:

<blockquote>Here is the content of the quote.</blockquote>

Once you've entered text, Weblow calls the element a Blockquote and you can't change its tag anymore.

Now for the cite= attribute, you're supposed to be able to add it with custom attributes, but the attribute name "cite" is blocked by Webflow, for a reason I don't know about.

But if you were allowed to do this, you would get the exact academic code I was depicting before:

<blockquote cite="">Here is the content of the quote.</blockquote>

@cyberdave, why can't we add "cite=" attributes?


but there are no Double Quotation Marks? How can i add this?


The way a <blockquote> displays has nothing to do with it being an HTML <blockquote>, it's only CSS styling. Once you've got your code and structure correct, use any or all Webflows' features to make your element look like what you want.

If you want real "text" quotation marks to be added, you'll have to add custom CSS code with pseudo elements. For example, this code adds double quotes around a <blockquote> element:

blockquote:before { content: '\201C' }
blockquote:after { content: '\201D' }

Some will say it's incorrect and should be:

blockquote { quotes: '\201c' '\201d'; }
blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

...but I'll have to read more about this to have an opinion.

Edit: I just read more about it and this is indeed the most correct code to use.

But you can also want something more graphical, in that case do it with Webflows' UI, something like giving <blockquote> a class name then a large padding all around, a subtle background color, an even larger padding on the left and a big icon of quotation marks in the background.

A bit like this:

So if we can style any DIV like this, why is it important to really declare a <blockquote> element in the code?

Because more people than we think acces our content with something different than a web browser. It can be an accessibility device, a console/terminal, a voice speaker etc. All these devices will ignore your CSS but still know that it's a quote and will treat it in their own way, making sure the human behind gets that it's a quote.

This is called accessibility.

How to style Blockquotes

@vincent On this topic had would you add the quote source (just a name)? Looking at this article, it looks like a footer should be added inside the blockquote. What do you think? Probably just a code box and drop the html I need inside.


Oh, yes, absolutely, and I'd tke that as a very important piece of information... I very often rant about information that don't retain sources, authors, dates and info. So I would even work on a supercharged blockquote, actually, containing: Quote, Author, Date and Link to the source, if any. Link would be attached to Authors' name, and date can be more discreet, as in a tooltip that would display all informations at once: Author name - date - domain of the link).

The date can even be splitted into two parts of information: date itself and place and/or event. ie: 2009/08/22 - Drupalcon - Szeged, Hungary.

When a quote is inside an interview for example, it's obvious that the author is the interviewed person. It could be considered to add the authors' name anyway even if it's hidden by CSS.

Thanks, very nice article. I like when the context is preserved, I get mad to see blogs with no date on posts. I like when tweets are embeded in webpages these days, you get to keep all the context, you can click on the tweet to get the discussion, the authors' handle to get to his feed, the #tags, favorite and share buttons etc... This is how organic the web is and this helps to make honest writings that readers can analyse and fact check as they wish.


@vincent So a footer inside a blockquote. Just seems weird but I'll go for it.


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.