Dropcap Element
The Dropcap Element turns the first letter of a paragraph into a large initial that spans several lines of text. It is a classic typographic detail for articles, stories and introductions, and gives a long text a clear starting point.
The letter can be shown on its own in an accent color, or inside a colored box with square, rounded or fully round corners. Colors follow the Global Options by default, so every dropcap on the site looks the same unless you change it.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Dropcap Element
The Dropcap Element is not placed in a column on its own. Open a Text Block Element, place the cursor at the very start of the paragraph, remove the first letter, and insert the Dropcap Element with the Tirenoa Builder Element Generator in the editor toolbar. Enter that letter in the Dropcap Letter field.
Set Boxed Dropcap to Yes to place the letter in a box, and use Box Radius for its corners; enter round for a circle. Box Radius only appears when the box is on.
On the Design tab, Color is the color of the letter, or of the box when Boxed Dropcap is on. Text Color is the letter color inside the box and is only used for boxed dropcaps. Leave both empty to use the Global Options colors.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Dropcap. Change them there to style every Dropcap at once.
General
| Heading | Description |
|---|---|
| Dropcap Letter | Add the letter to be used as dropcap. |
| Boxed Dropcap | Choose to get a boxed dropcap. |
| Box Radius | Choose the radius of the boxed dropcap. In pixels (px), for example 1px, or “round”. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Color | Controls the color of the dropcap. Leave blank for Global Options selection. |
| Text Color | Controls the color of the dropcap letter when using a box. Leave blank for Global Options selection. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Enter a single letter only. Longer text makes the dropcap wrap in unexpected ways.
- Use one dropcap at the start of an article or section, not in every paragraph.
- Check the contrast between Text Color and Color on boxed dropcaps so the letter stays readable.
- Screen readers and search engines read the letter together with the rest of the word, so the text stays intact.