I’m working on a site that has a “Statistics” paragraph bundle. The output looks like this:
The specification calls for the content author to be able to choose between a few different visual styles for the header (title), shown as Statistics: 3 Up Feature Ipsum Sit H2 in the screenshot above.
The simplest way to achieve this is to add a field to the paragraph bundle:
Name: Header Style
Machine name: field_header_style
Type: List (text)
Allowed number of values: 1
Default value: Visually normal
Note that the key (key|value) needs to work as a css class.
The last step is to add a class, based on the chosen value, to the Section Header field when the paragraph item gets rendered. If you’re using Display Suite with field templates enabled, this is a very simple change! You don’t have to write any code, in fact. Simply edit the output of the Section Header field by clicking the cogwheel:
In my case I browsed for Paragraphs > Header Style > Text value. The token is: [paragraph:field_header_style:value]
Finally, just append that token to the end of the Classes field (shown above). I chose to prepend “header-style” to the beginning for a final value of header-style–[paragraph:field_header_style:value].
That’s it! Test it out by adding a record and setting the header style:
View the item on the frontend and you should find the additional class:
<div class="section__header statistics-threecol__header ifde-threecol__header">
<h2 class="section__title statistics-threecol__title header-style--small">Foo</h2>