Follow

Using Drop Caps

Table of Contents

  1. What are Drop Caps?
  2. Tempest CMS UI
  3. PHX Rendering

1. What Are Drop Caps?

drop cap (dropped capital) is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of a drop cap is usually two or more lines.

Screen_Shot_2020-12-15_at_9.44.48_AM.png

2. Tempest CMS UI

  • Drop cap is available via the block level menu to apply to a paragraph. This allows a drop cap to get set on any paragraph within the content item.

How to Use It

  • Click on the pencil icon and select the drop cap style (A or B). This will only affect the first letter of the paragraph.

 

Screen_Shot_2020-12-15_at_9.47.31_AM.png

Users have the option to select from 2 Drop Cap styles (A & B) which will correspond to the Drop Cap treatments specified in Site Styles. Users do not have access to the Site Styles section, so if there are any questions about changing your styles, contact publisher services. Drop Cap style A will translate to a dark letter vs. Drop Cap style B which will translate as a muted letter. In this example, the lighter shading of the T in the second paragraph tells you that you're using a different style, the T won't look like the T in the CMS, but will render on PHX to look like whichever style has been set for option B. You can see an example of two styles as rendered on PHX at the bottom of this article. 

Screen_Shot_2020-12-15_at_9.49.14_AM.png

When applying the Drop Cap in the CMS UI, it will appear that the first letter is rendered twice. This is a limitation of the browser. This redundancy is not reflected upon rendering.

Screen_Shot_2020-12-15_at_9.50.15_AM.png

Example of what this looks like in the CMS UI vs. PHX rendering:

Screen_Shot_2020-12-15_at_9.51.12_AM.png

3. PHX Rendering

NOTE: The Drop Cap markup is translated on all devices on the web.

Example of two styles you could have on a site:

Screen_Shot_2020-12-15_at_9.51.54_AM.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk