Lightbox

Lightbox default

Example:

Config:

{
  "className": "bg-primary p-3",
  "id": "lightbox-1",
  "title": "Lightbox Title",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap1\">\n"
}

Lightbox Cyan

Example:

Config:

{
  "theme": "cyan",
  "className": "bg-secondary p-3",
  "id": "lightbox-2",
  "title": "Lightbox Title 2",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap2\">\n"
}

Lightbox Dark

Example:

Config:

{
  "theme": "dark",
  "id": "lightbox-3",
  "title": "Lightbox Title 3",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap3\">\n"
}

Lightbox Yellow

Example:

Config:

{
  "theme": "yellow",
  "id": "lightbox-4",
  "title": "Lightbox Title 4",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap3\">\n"
}

Lightbox Blue with text

Example:

Config:

{
  "theme": "blue",
  "className": "p-3",
  "text": "Robinhood",
  "id": "lightbox-5",
  "title": "Lightbox Title 5",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap2\">\n"
}

Lightbox with Title and Icon

Example:

Config:

{
  "theme": "text-icon",
  "btnTitle": "Evolving consumer behaviour",
  "icon": {
    "src": "/areas/proshares/assets/images/crown-underline.svg",
    "alt": "evolving-consumer-behaviour"
  },
  "id": "lightbox-6",
  "title": "Lightbox Title 6",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap2\">\n"
}

Lightbox White with Blue text

Example:

Config:

{
  "theme": "white-blue",
  "className": "p-3",
  "text": "Robinhood",
  "id": "lightbox-5",
  "title": "Lightbox Title 5",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap2\">\n"
}

Lightbox White with Purple text

Example:

Config:

{
  "theme": "white-purple",
  "className": "p-3",
  "text": "Robinhood",
  "id": "lightbox-5",
  "title": "Lightbox Title 5",
  "body": "<p>One column content. It can take copy and imagery stacked using existing typography (headings, subheads and body copy and in-line links.</p>\n<img src=\"\\assets\\images\\bar-chart.jpg\" alt=\"ghrap2\">\n"
}