Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
cite
Represents the title of a creative work (book, song, film, etc.).
Description
The <cite> element represents the title of a creative work: a book, paper, essay, poem, song, film, TV show, game, painting, musical, exhibition, legal case, website, or blog post. It is rendered in italic by default.
The element should contain only the title of the work, not the author's name (though the author can appear nearby).
When to Use
- Book titles: The Great Gatsby
- Film/TV: Inception, Breaking Bad
- Music: Album titles like Abbey Road
- Art: Starry Night, The Thinker
- Games: The Legend of Zelda
- Attribution: Inside
<figcaption>for blockquote sources
When NOT to Use
Examples
Inline citation
<p>My favorite book is <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>With blockquote and figcaption
<figure> <blockquote> <p>It was the best of times, it was the worst of times.</p> </blockquote> <figcaption>— Charles Dickens, <cite>A Tale of Two Cities</cite></figcaption></figure>Variants
.quoted
Adds typographic double quotes around the title via CSS ::before and ::after. Useful when house style requires titles in quotes rather than (or in addition to) italics.
Quoted cite variant
<p>I watched <cite class="quoted">The Shawshank Redemption</cite> last night.</p><p>The article <cite class="quoted">Why CSS is Awesome</cite> changed my perspective.</p>CSS Reference
Cite CSS
cite { font-style: italic;} /* Quoted variant — adds typographic quotes */cite.quoted::before { content: "\201C"; /* left double quote */} cite.quoted::after { content: "\201D"; /* right double quote */}Accessibility
<cite>has no special ARIA role — screen readers render it as italic text- The semantic meaning helps search engines understand the text is a title
- The italic styling provides a visual convention familiar to readers
Related
<blockquote>— For longer quotations (cite provides the source title)<q>— For inline quotations with locale-aware quote marks<figure>— For self-contained content with optional<figcaption><em>— For emphasis (not titles)<i>— For alternate voice text (taxonomic names, thoughts)