ISLG's Custom Components utilize code injection to function. When code blocks with specific attributes are added to a page, the injected code processes and renders them correctly.
To enable custom components on a new page, follow these steps:
-
Copy the injected code from any page that uses custom components already (found in Page Settings -> Advanced -> Page Header Code Injection).
-
Paste the code into the Page Code Injection field of the new page.
- Acknowledgements
- Authors
- BottomNav
- Button
- CenterText
- CenteredEmbed
- Footnote
- Header
- Heading
- Paragraph
- Sticky2Column
- Sticky2ColumnSidebar
- 25-75Embed
- TableOfContents
- TextWithImage
- Tooltip
<div class="isc-acknowledgements">
<div class="data">
<div data-title>Acknowledgements</div>
<div data-image data-image-url="https://your-image-url"></div>
<div data-content>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>
</div>
</div>- The data-image div is optional
<div class="isc-authors">
<div class="data">
<div data-description>Listed in alphabetical order</div>
<div data-content>
<div
data-author
data-name="Alison Diéguez"
data-role="CUNY Institute for State and Local Governance"
data-avatar-url="https://avatar-image-1"
></div>
<div
data-author
data-name="Brian Holliday"
data-role="CUNY Institute for State and Local Governance"
data-avatar-url="https://avatar-image-2"
></div>
<div
data-author
data-name="Kate Jassin"
data-role="CUNY Institute for State and Local Governance"
data-avatar-url="https://avatar-image-3"
></div>
</div>
</div>
</div>
<div class="isc-bottom-nav">
<div class="data">
<div data-nav-button data-url="https://www.google.com">
Back to Resources
</div>
</div>
</div>
<div class="isc-button">
<div class="data">
<div data-margins data-margin-top="0px" data-margin-bottom="70px"></div>
<div
data-button
data-button-text="DOWNLOAD A PDF OF THE REPORT"
data-button-url="https://www.google.com/"
></div>
</div>
</div>- The data-margins div is optional. If removed, margins will be 0px.
<div class="isc-center-text">
<div class="data">
<div data-margins data-margin-top="0px" data-margin-bottom="70px"></div>
<div data-background data-background-color="#ffffff"></div>
<div data-content>
<p>First Paragraph</p>
<span>This will be set as a pull quote</span>
<p>Second Paragraph</p>
</div>
</div>
</div>- The data-margins div is optional. If removed, margins will be 0px.
- Pull quote span is optional
<div class="isc-centered-embed">
<div class="data">
<div data-flip data-flip-columns="false"></div>
<div data-margins data-margin-top="0px" data-margin-bottom="70px"></div>
<div
data-embed
data-iframe-url="https://datawrapper.dwcdn.net/7Q2A7/10/"
></div>
<div data-content>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
</div>- The data-margins div is optional. If removed, margins will be 0px.
- The data-flip div controls the order of the centered embed. A false sets the text content first, and the embed second; true flips the order.
The footnote component can be embedded inside other components like isc-header. Like the table of contents component, or the tooltip component, it does not need its own code block.
<div class="isc-footnote">
<div class="data">
<div data-footnote data-footnote-id="i">First footnote content</div>
<div data-footnote data-footnote-id="ii">Second footnote content</div>
<div data-footnote data-footnote-id="iii">Third footnote content</div>
</div>
</div><p>
Setting a footnote within any paragraph element. The roman numeral inside the
sup element will be matched for content.<sup isc-footnote-sup>i</sup>
</p>
<div class="isc-header">
<div class="data">
<div data-top>RESEARCH BRIEF</div>
<div data-date data-month="2" data-year="2025"></div>
<div data-title>Critical Services, High Growth, Low Wages</div>
<div data-subtitle>
Employment and Wage Trends Across New York’s Human Services Workforce
</div>
</div>
</div>
<div class="isc-chapter-heading">
<div class="data">
<div data-margins data-margin-top="80px" data-margin-bottom="80px"></div>
<div data-title>Occupation Trends Across the Workforce</div>
</div>
</div>- The data-margins div is optional. If removed, margins will be 0px.
<div class="isc-paragraph">
<div class="data">
<div data-margins data-margin-top="80px" data-margin-bottom="80px"></div>
<div data-content>
<p>
New York’s human services sector is crucial to the state’s social
fabric...
</p>
</div>
</div>
</div>- The data-margins div is optional. If removed, margins will be 0px.
<div class="isc-sticky-2-column">
<div class="data">
<div data-flip data-flip-columns="false"></div>
<div data-width data-text-width-percent="50"></div>
<div data-margins data-margin-top="0px" data-margin-bottom="70px"></div>
<div data-mobile data-viz-position="2"></div>
<div data-viz data-viz-url="https://image-url"></div>
<div data-viz-overlay-text>
Despite the importance of these services, wages in the human services...
</div>
<div data-content>
<p>
New York’s human services sector is crucial to the state’s social
fabric...
</p>
<p>
Second paragraph has a link to an external source
<a
target="_blank"
rel="noopener noreferrer"
href="https://external-link"
>and opens on a new tab</a
>
</p>
<p>Third paragraph...</p>
</div>
</div>
</div>- The data-margins div is optional. If removed, margins will be 0px.
- The data-flip div controls the order of the sticky 2-column. A false sets the text content on the left, and the viz column on the right second; true flips the order.
- The data-mobile div controls the placement of the viz on mobile. A value of 2 sets the viz after the first 2 content paragraphs.
- The data-width div controls the sizes of the column in percentage. A value of 50 splits the columns equally. A value of 40, sets the left column size 40% of the total width, and the right column 60% of the width.
<div class="isc-sticky-2-column-sidebar">
<div class="data">
<div data-margins data-margin-top="70px" data-margin-bottom="70px"></div>
<div data-viz data-viz-url="https://image-url"></div>
<div data-sidebar-title>What are human services?</div>
<div data-mobile data-sidebar-position="1"></div>
<div data-sidebar-content>
<p>This will be the contents inside the sidebar.</p>
</div>
<div data-content>
<p>First paragraph...</p>
<h3>H3s can be added</h3>
<ol>
<li>
<b>As well as b elements for bold</b>
And list items for ordered (ol elements) and unordered lists (ul
elements)
</li>
</ol>
<ul>
<li></li>
</ul>
</div>
</div>
</div>- The data-margins div is optional. If removed, margins will be 0px.
<div class="isc-sticky-2-column-embed">
<div class="data">
<div data-flip data-flip-columns="true"></div>
<div
data-embed
data-iframe-url="https://datawrapper.dwcdn.net/7Q2A7/10/"
></div>
<div data-content>
<p>
Home Health Aides make up most of New York State's human services
workforce (Figure 7). Health Aide, Nursing Assistant, or Childcare
Worker.<sup isc-footnote-sup>vi</sup>
</p>
</div>
</div>
</div>- The data-flip div controls the order of the sticky 2-column. A false sets the text content on the left, and the viz column on the right second; true flips the order.
The TableOfContents component automatically generates a navigable list of headings from your page content. Unlike other components, it:
- Does not require a nested .data div or additional data attributes
- Can be embedded inside other components like isc-header or at the top level of your document. It does not need its own code block.
- Will automatically scan the page for headings and create anchor links to them.
<div class="isc-table-of-contents"></div>
<div class="isc-text-with-image">
<div class="data">
<div
data-title
data-title-text="Defining the human services workforce"
></div>
<div data-image data-image-url="https://image-url"></div>
<div data-content>
<p>First paragraph</p>
<span>
Whatever is inside a span element will be treated as a pull quote and
will be placed in the order it appears within the data content.
</span>
<p>Second paragraph</p>
</div>
</div>
</div>
The tooltip component can be embedded inside other components like isc-header. Like the table of contents component, or the footnote component, it does not need its own code block.
<div class="isc-tooltip">
<div class="data">
<div data-tooltip data-tooltip-id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus
placerat consectetur.
</div>
<div data-tooltip data-tooltip-id="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus
placerat consectetur. Donec maximus mi id diam laoreet auctor.
</div>
</div>
</div><sup isc-tooltip-sup data-tooltip-id="1">^</sup>