@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Getting-started/start/guidelines/formatting.json

@@ -0,0 +1,97 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:01.656Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/formatting",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/formatting",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "152e4bab7e1c54cb395e5fe7c426efeba7ed3715bdc6ba54556ec3ed7a21165e"
+  },
+  "title": "Formatting guide",
+  "lead": "Having a common date formatting guide is crucial to ensure consistency, clarity, and accuracy in documentation, making it easier to understand and interpret dates correctly across different contexts.",
+  "content": [
+    {
+      "heading": "Formatting guide",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "Here's what you will find in the formatting guide",
+      "body": "- Date formats\n- Date formats overview If nothing else is specified use the default date format: YYYY-MM-DD Avoid the American date format: MM/DD/YYYY Use the Intl.DateTimeFormat to format dates for all locales Date and time format Format durations Formatting dates for headlines and sections Relative date and time Time format including timezones\n- Number formats\n- Number formats overview Omit unused or meaningless decimals Formatting numbers with units\n\n- Date formats overview\n- If nothing else is specified use the default date format: YYYY-MM-DD\n- Avoid the American date format: MM/DD/YYYY\n- Use the Intl.DateTimeFormat to format dates for all locales\n- Date and time format\n- Format durations\n- Formatting dates for headlines and sections\n- Relative date and time\n- Time format including timezones\n\n- Number formats overview\n- Omit unused or meaningless decimals\n- Formatting numbers with units",
+      "examples": []
+    },
+    {
+      "heading": "Date formats",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "Date formats overview",
+      "body": "This is a list of all supported langues and their respective date format showcasing also similar locales sharing the same format.",
+      "examples": []
+    },
+    {
+      "heading": "If nothing else is specified use the default date format: YYYY-MM-DD",
+      "body": "This format is defined in the ISO 8601 standard, which is maintained by the International Organization for Standardization (ISO). It's widely used for data exchange and communication because it:\n\n- Sorts chronologically: Dates appear in order when sorted alphabetically (e.g., 2023-12-31 comes before 2024-01-01).\n- Avoids ambiguity: The clear separation between year, month, and day eliminates confusion, especially when dealing with different cultural date order preferences.\n\nWhile some countries have their own preferred date formats for everyday use, YYYY-MM-DD is often the chosen format for:\n\n- International communication\n- Data storage and exchange\n- Software applications\n\nIn the table above, Swedish (sv-SE) is the only locale listed that uses YYYY-MM-DD as the standard format. However, the international nature of the internet and technology has made YYYY-MM-DD increasingly familiar in many regions.\n\nIf nothing else is specified use the default date format otherwise use the date format according the selected locale.",
+      "examples": []
+    },
+    {
+      "heading": "Avoid the American date format: MM/DD/YYYY",
+      "body": "While there's nothing inherently wrong with the American date format (MM/DD/YYYY), it's recommended to avoid it as the default for the following reasons:\n\n- Non-standard: It's not the international standard format defined by ISO 8601 (YYYY-MM-DD). This can lead to confusion and potential errors when exchanging data or collaborating with international teams.\n- Ambiguity: MM/DD/YYYY can be misinterpreted, especially when dealing with unfamiliar dates. For example, 05/07/2024 could be May 7th or July 5th.\n- Sorting Issues: Dates in MM/DD/YYYY format don't sort chronologically by default. This can be problematic when handling lists or data sets involving dates.\n- Limited Reach: The American date format is primarily used in the United States, Canada, and a few other countries. Using a more widely recognized format like YYYY-MM-DD promotes better international understanding.\n\nHint for Date Pickers\n\nBe aware that some date picker components might default to the American format (MM/DD/YYYY) if no locale is explicitly defined. Double-check your date picker's settings to ensure it aligns with these guidelines.",
+      "examples": []
+    },
+    {
+      "heading": "Use the Intl.DateTimeFormat to format dates for all locales",
+      "body": "When formatting dates in React applications, you have two choices:\n\n- Vanilla Intl.DateTimeFormat: Use the standard function.\n- ReactIntl (recommended): Utilize ReactIntl's formatDate function or the FormattedDate component for a more convenient and potentially reusable approach.\n\nRegardless of the chosen method (direct function or ReactIntl), you'll have access to the same set of formatting options for customizing the date output with Intl.DateTimeFormat.\n\nThe default date and time format for the default locale \"en-GB\" looks like this: 27/05/2024\n\n```jsx\n<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' />\n```\n\n```javascript\nconst formatDate = (date, locale) => {\n    const options = {\n      year: 'numeric',\n      month: '2-digit',\n      day: '2-digit'\n    };\n\n    const formatter = new Intl.DateTimeFormat(locale, options);\n    return formatter.format(date);\n  }\n\nconst locales = [\n    'bg-BG', 'cs-CZ', 'da-DK', 'el-GR', 'es-ES', 'et-EE', 'fi-FI', 'fr-FR',\n    'hr-HR', 'hu-HU', 'it-IT', 'lt-LT', 'lv-LV', 'nb-NO', 'nl-NL', 'pl-PL',\n    'pt-PT', 'ro-RO', 'sk-SK', 'sl-SI', 'sv-SE', 'de-DE', 'pt-BR', 'en-GB'\n];\n\nconst today = new Date();\n\nlocales.forEach(locale => {\n    const formattedDate = formatDate(today, locale);\n    console.log(`Locale: ${locale}, Formatted date: ${formattedDate}`);\n});\n```\n\nFormatting a date range\n\nFor formatting a time range use the ReactIntl FormattedDateTimeRange component. Note that for dates in headlines or in sections, there is a dedicated format rule listed below.\n\n```jsx\n() => {\n    const yesterday = new Date();\n    yesterday.setDate(new Date().getDate() - 1);\n\n    return <FormattedDateTimeRange from={yesterday} to={new Date()} />;\n})\n```",
+      "examples": []
+    },
+    {
+      "heading": "Date and time format",
+      "body": "None of the mentioned locales use a 12-hour format by default according to common usage. Here's a breakdown:\n\n- All the listed locales (including en-GB) typically use the 24-hour format for displaying time.\n- While some countries might use a 12-hour format in informal contexts, the 24-hour format is generally preferred for official communication and technical applications.\n\nThe default date and time format looks like this: 27/05/2024, 11:17\n\n```jsx\n<FormattedDate value={new Date()} year='numeric' month='2-digit' day='2-digit' hour='2-digit' minute='2-digit' />\n```\n\n```javascript\nconst formatDateTime = (date, locale) => {\n    const options = {\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit'\n    };\n    \n    const dateTimeFormatter = new Intl.DateTimeFormat(locale, options);\n    return dateTimeFormatter.format(date);\n}\n\nconst locales = [\n    'bg-BG', 'cs-CZ', 'da-DK', 'el-GR', 'es-ES', 'et-EE', 'fi-FI', 'fr-FR',\n    'hr-HR', 'hu-HU', 'it-IT', 'lt-LT', 'lv-LV', 'nb-NO', 'nl-NL', 'pl-PL',\n    'pt-PT', 'ro-RO', 'sk-SK', 'sl-SI', 'sv-SE', 'de-DE', 'pt-BR', 'en-GB'\n];\n\nconst today = new Date();\n\nlocales.forEach(locale => {\n    const formattedDateTime = formatDateTime(today, locale);\n    console.log(`Locale: ${locale}, Formatted date time: ${formattedDateTime}`);\n});\n```",
+      "examples": []
+    },
+    {
+      "heading": "Formatting dates for headlines and sections",
+      "body": "When formatting a date or a date range for a headline or a section, use the following format including the weekday if it's not today. If the date is today, add the word \"today\" instead of the weekday.\n\n- Today, 24 May 2024\n- Thursday, 23 May 2024\n- 12 Feb - 16 Feb 2024\n\n```jsx\n() => {\n    const yesterday = new Date();\n    yesterday.setDate(new Date().getDate() - 1);\n\n    return (\n        <>\n            {'Today, '}\n            <FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />\n            <br />\n            <FormattedDate value={yesterday} year='numeric' month='short' day='numeric' weekday='long' />\n        </>\n    );\n})\n```\n\n```javascript\nfunction formatDateWithWeekday(date) {\n    const today = new Date();\n    const isToday =\n        today.getDate() === date.getDate() &&\n        today.getMonth() === date.getMonth() &&\n        today.getFullYear() === date.getFullYear();\n\n    const options = {\n        day: 'numeric',\n        month: 'short',\n        year: 'numeric',\n        weekday: isToday ? undefined : 'long',\n    };\n\n    const dateTimeFormatter = new Intl.DateTimeFormat('en-GB', options);\n    return isToday ? `Today, ${dateTimeFormatter.format(date)}` : dateTimeFormatter.format(date);\n}\n\n// Example for today\nconst today = new Date();\nconst formattedDate = formatDateWithWeekday(today);\nconsole.log(formattedDate);\n\n// Example for yesterday\nconst yesterday = new Date();\nyesterday.setDate(today.getDate() - 1); // Subtract 1 day from today\nconst formattedDateYesterday = formatDateWithWeekday(yesterday);\nconsole.log(formattedDateYesterday);\n```\n\nFormatting a date range for headlines\n\nWhen the date rage has the same year for both dates, omit the year for the first date so it looks like this: 27 May - 28 May 2024\n\n```jsx\n() => {\n    const yesterday = new Date();\n    yesterday.setDate(new Date().getDate() - 1);\n\n    return (\n        <>\n            <FormattedDate value={yesterday} month='short' day='numeric' />\n            {' - '}\n            <FormattedDate value={new Date()} year='numeric' month='short' day='numeric' />\n        </>\n    );\n})\n```\n\n```javascript\nfunction formatDateRange(startDate, endDate) {\n    if (!(startDate instanceof Date) || !(endDate instanceof Date)) {\n        throw new Error(\"Invalid input. Please provide valid Date objects.\");\n    }\n\n    const startDateFormatter = new Intl.DateTimeFormat('en-GB', {\n        day: 'numeric',\n        month: 'short'\n    });\n\n    const endDateFormatter = new Intl.DateTimeFormat('en-GB', {\n        day: 'numeric',\n        month: 'short',\n        year: 'numeric'\n    });\n\n    const formattedStartDate = startDateFormatter.format(startDate);\n    const formattedEndDate = endDateFormatter.format(endDate);\n\n    return `${formattedStartDate} - ${formattedEndDate}`;\n}\n\n// Example usage\nconst startDate = new Date(2024, 1, 12); // Feb 12, 2024\nconst endDate = new Date(2024, 1, 16); // Feb 16, 2024\n\nconst formattedRange = formatDateRange(startDate, endDate);\nconsole.log(\"Formatted Date Range:\", formattedRange);\n```",
+      "examples": []
+    },
+    {
+      "heading": "Format durations",
+      "body": "Use relative date and time formatting to help the understand quickly when an event happened or when a message has been sent:\n\n- 3 days\n- 2h 32min\n- 45min\n\nBest for: Short durations where hours and minutes are the most relevant unit.\n\n- 3d\n- 3m 20s\n- 10s\n\nBest for: When space is limited, and clarity is still maintained. Example: In a compact playlist view displaying track lengths.\n\n```jsx\n<FormattedNumber value={2} />h <FormattedNumber value={45} />min\n```",
+      "examples": []
+    },
+    {
+      "heading": "Relative date and time",
+      "body": "- \"5 minutes ago\"\n- \"1 month ago\"\n- \"7 days ago\"\n- \"In 2 hours\"\n- \"Now\" or \"Just now\" (for events within the last minute)\n\n- Displaying when a notification arrived or a message was sent\n- Counting down to an upcoming event\n- Indicating how recently an item was updated\n- Benefits\n- Clear and concise for recent events Easy for users to understand the time difference\n\n- Clear and concise for recent events\n- Easy for users to understand the time difference\n\nUsing a relative time is simple by using the ReactIntl FormattedRelativeTime component.\n\nExample: now\n\n```jsx\n<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />\n```\n\n- \"Yesterday\"\n- \"Yesterday, 10:39\"\n- \"Today, 12:17\"\n- \"Tomorrow\"\n- \"Last week\"\n- \"Next Friday\"\n- \"In 3 days\"\n\n- Displaying upcoming or past calendar events\n- Highlighting recent activity within a timeframe (e.g., \"Top posts from the past week\")\n- Providing deadlines or due dates in a user-friendly way\n- Benefits\n- Intuitive understanding for users familiar with common timeframes Reduces mental calculations for interpreting absolute dates\n\n- Intuitive understanding for users familiar with common timeframes\n- Reduces mental calculations for interpreting absolute dates\n\nThe choice between relative and absolute formats depends on the context and desired level of precision:\n\n- Use relative formats: When the time difference or date proximity is more important than the exact timestamp. Example: \"Your flight departs in 2 hours\" is more relevant than \"Your flight departs at 14:30\".\n- Use absolute formats: When precise timestamps are crucial, or for long time spans where relative terms become ambiguous.\n\nExample for an upcoming event using ReactIntl: In 3 Days\n\n```jsx\n<FormattedRelativeTime value={0} numeric='auto' updateIntervalInSeconds={1} />\n```\n\n- Locale and cultural context: Relative terms like \"yesterday\" or \"next week\" might vary across languages and cultures. Consider user locale when implementing these formats.\n- Level of detail: You might need to adjust the granularity of relative formats. For example, \"3 weeks ago\" might be more appropriate than \"21 days ago\" depending on the context.",
+      "examples": []
+    },
+    {
+      "heading": "Time format including timezones",
+      "body": "Understanding time zones can be challenging\n\nWhile time zones are essential for global coordination, navigating them can be complex. Most users naturally think and schedule their activities in their local time zone. Concepts like Coordinated Universal Time (UTC) and daylight saving time (DST) can add layers of complexity.\n\nThis table lists the main timezones used across Europe, including their standard times and any daylight saving times. Note that some regions do not observe daylight saving time.\n\nStudies show that users think in their local time - users often don’t think about UTC at all. Nor do they understand time zones, or the difference between UTC and GMT, or when and where daylight saving times are. But GMT is a more familiar time standard than UTC (even though UTC is the correct time standard). Since the UTC and GMT have the same offset and is widely more common in user interfaces, it is recommended to show GTM to the user instead of UTC.\n\nFor optimal clarity and consistency, it's best to display time zone offsets like GMT+1:00 without a blank space before the \"+\" symbol.\n\nPrioritize the user's local time\n\nTo simplify the user's experience, we prioritize displaying times in your local time zone. This eliminates the need for manual conversions or deciphering time zone differences.\n\nTime zone transparency\n\nWhile we present times in the user's local time zone by default, we understand the importance of transparency. If needed, you can display information regarding the corresponding GMT time.\n\n- Primary display: Show times in the user's local timezone for ease of use\n- Secondary display: Include the GMT offset in smaller text or tooltips to provide additional context\n\nTotal duration matters\n\nFor situations with multiple locations and time zones, providing a clear \"total travel time\" or \"duration\" alongside the individual departure and arrival times is incredibly helpful. This provides a comprehensive picture of the overall journey, just like the best travel itineraries do.\n\nEvent-Based timezones\n\nFor events, show both the local time and the event's original timezone. For example, \"Meeting scheduled for 15:00 (CEST) / 16:00 (EEST)\n\nLocalizing time displays for various European countries\n\nWhen localizing time displays for German-speaking users, remember to append the term \"Uhr\" (with a blank separator) after the hour when displaying times in a 24-hour format to ensure accurate and culturally appropriate representation.\n\nThis table provides a comprehensive overview of how to handle time display formats across various European countries, ensuring localized and accurate time representations.\n\n- Constitution Day 23/05/2024, 3 days ago\n- Assumption Day 15/08/2024, in 64 days",
+      "examples": []
+    },
+    {
+      "heading": "Number formats",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "Number formats overview",
+      "body": "This is a list of all supported langues and their respective country, decimal separator, thousand separator, and an example of a formatted number.\n\nBest practices for number formatting\n\n- Locale awareness Always format numbers based on the user’s locale settings to ensure familiarity and reduce errors\n- Consistent use of delimiters Ensure the consistent use of decimal and thousand separators as per the locale’s conventions\n- Handling edge cases Be aware of edge cases like negative numbers, very large numbers, and numbers with many decimal places\n- Use libraries Utilize libraries like ReactIntl to handle number formatting, which provides built-in support for multiple locales and ensures correctness\n\n```jsx\nconst NumberFormattingExample = () => {\n    const number = 1234567.89;\n\n    return (\n        <IntlProvider locale=\"de-DE\">\n            <FormattedNumber value={number} />\n        </IntlProvider>\n    );\n};\n```\n\nIn this example, the number 1234567.89 will be formatted as 1.234.567,89 in the German locale.",
+      "examples": []
+    },
+    {
+      "heading": "Omit unused or meaningless decimals",
+      "body": "When displaying numbers with units, it's often more readable and professional to omit unnecessary trailing zeros in decimal places. For instance, displaying \"123 km\" instead of \"123.0 km\" when the value is a whole number.\n\nAdditionally, decimals should be omitted in cases where they do not add meaningful information, such as in a fuel level \"74,87 %\".\n\n```jsx\n<FormattedNumber\n    value={123.0}\n    minimumFractionDigits={0}\n    maximumFractionDigits={2}\n    style='unit'\n    unit='kilometer'\n/>\n```\n\n- 123 km\n- 1,234 km\n- Fuel level: 75%\n\n- 123.0 km\n- 1234.0 km\n- Fuel level: 74,87 %",
+      "examples": []
+    },
+    {
+      "heading": "Formatting numbers with units",
+      "body": "ReactIntl also supports formatting units like currency, percentages, and other measurements. Here are some examples on how to format numbers with units.\n\n* Note: kilowatt-hour and megawatt-hour are not yet supported byIntl.NumberFormat(). Please append the unit manually. For more details, see here\n\n```jsx\nconst NumberExample = () => {\n    const value = 1234.56;\n    return (\n        <table className='table table-condensed'>\n            <tbody>\n                <tr>\n                    <td>Kilograms</td>\n                    <td>\n                        <FormattedNumber value={value} style='unit' unit='kilogram' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Kilometer</td>\n                    <td>\n                        <FormattedNumber value={value} style='unit' unit='kilometer' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Kilometer (long)</td>\n                    <td>\n                        <FormattedNumber value={value} style='unit' unit='kilometer' unitDisplay='long' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Meters</td>\n                    <td>\n                        <FormattedNumber value={value} style='unit' unit='meter' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Seconds (long)</td>\n                    <td>\n                        <FormattedNumber value={45} style='unit' unit='second' unitDisplay='long' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Minutes (long)</td>\n                    <td>\n                        <FormattedNumber value={12} style='unit' unit='minute' unitDisplay='long' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Centimeters</td>\n                    <td>\n                        <FormattedNumber value={34} style='unit' unit='centimeter' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Percent</td>\n                    <td>\n                        <FormattedNumber value={0.1234} style='percent' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Euro</td>\n                    <td>\n                        <FormattedNumber value={value} style='currency' currency='EUR' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Kilobyte</td>\n                    <td>\n                        <FormattedNumber value={1000} style='unit' unit='kilobyte' unitDisplay='narrow' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Celsius</td>\n                    <td>\n                        <FormattedNumber value={27} style='unit' unit='celsius' unitDisplay='narrow' />\n                    </td>\n                </tr>\n                <tr>\n                    <td>Duration</td>\n                    <td>\n                        <FormattedNumber value={2} />h <FormattedNumber value={45} />\n                        min\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    )\n};\n```\n\nIn Germany, the correct unit format for kilogram is \"kg\" with a lowercase \"k\" and \"g\". It follows the international standard for unit symbols defined by the International System of Units (SI).\n\nHere's an example of the correct usage:\n\n- Correct: 1.234,56 kg\n- Incorrect: 1.234,56 Kg\n\nThe unit symbol should always be in lowercase and a space should be used between the number and the unit symbol\n\n> Note: When formatting durations in a short format, ReactIntl does not follow the more common style defined in the section \"Format durations\" especially for locales like de-DE. In this case we need to combine the FormattedNumber with a custom unit.\n\n```jsx\n<FormattedNumber value={2} />h <FormattedNumber value={45} />min\n```\n\n```tsx\ntype FormattedDuration = {\n    hours?: number,\n    minutes?: number,\n    seconds?: number,\n};\n\nconst FormattedDuration = ({ hours, minutes, seconds }) => {\n    const hasHours = hours > 0;\n    const hasMinutes = minutes > 0;\n    const hasSeconds = seconds > 0;\n\n    return (\n        <div>\n            {hasHours && (\n                <>\n                    <FormattedNumber value={hours} />h\n                    {hasMinutes && ' '}\n                </>\n            )}\n            {hasMinutes && (\n                <>\n                    <FormattedNumber value={minutes} />min\n                    {hasSeconds && ' '}\n                </>\n            )}\n            {hasSeconds && (\n                <>\n                    <FormattedNumber value={seconds} />s\n                </>\n            )}\n        </div>\n    );\n};\n\n// Example Usage\nconst App = () => {\n    const duration1 = { hours: 8, minutes: 45 };\n    const duration2 = { hours: 0, minutes: 56 };\n    const duration3 = { hours: 1, minutes: 23 };\n\n    return (\n        <div>\n            <FormattedDuration {...duration1} />\n            <FormattedDuration {...duration2} />\n            <FormattedDuration {...duration3} />\n        </div>\n    );\n};\n```",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/guidelines/iframe.json

@@ -0,0 +1,93 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:01.960Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/iframe",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/iframe",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "9900ed63b333d03505d73ca19425dd9c027cf79c4a4eceb93e7dfe3e4c66aebd"
+  },
+  "title": "Iframe guidelines",
+  "lead": "When having a widget, the widget class is-iframe-widget needs to be added to the document HTML element <html class=\"is-iframe-widget\">",
+  "content": [
+    {
+      "heading": "Iframe guidelines",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "Working with iframes",
+      "body": "The window-iframe class will be added by the RIO UIKIT automatically, but you have to add the RIO Pageloader to your SPA for that.\n\nTo integrate a widget iframe seamlessly and to avoid scrolling within an iframe, we use the 3rd party lib iframe-resizer-react from https://www.npmjs.com/package/iframe-resizer-react. Both views, the parent (which displays the iframe) and the child (which is the iframe content) needs to import the iframe-resizer.\n\nParent application\n\nUse this if you want to embed an iframe into your application.\n\n```js\nimport IframeResizer from 'iframe-resizer-react';\n```\n\nChild application\n\nUse this if your application is a widget and will be embedded into other applications via an iframe.\n\n```js\nnpm install iframe-resizer --save\n```\n\nFor more information vist https://github.com/davidjbradshaw/iframe-resizer\n\n```js\nimport iframeResizerContentWindow from 'iframe-resizer/js/iframeResizer.contentWindow';\n```\n\nor simply\n\n```js\nimport 'iframe-resizer/js/iframeResizer.contentWindow';\n```\n\nAlternatively, you can add the iframe contentWindow script from a public CDN into yourindex.html\n\n```html\n<script\n    defer\n    type='text/javascript'\n    src='https://cdn.rio.cloud/libs/iframeResizer/4.2.8/iframeResizer.contentWindow.min.js'\n></script>\n```",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex justify-content-center\"><div class=\"iframe-wrapper width-400\"><iframe title=\"iframe\" src=\"https://menu.rio.cloud\" id=\"iFrameResizer0\" scrolling=\"no\" style=\"overflow: hidden;\"></iframe></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import IframeResizer from 'iframe-resizer-react';\n\nconst IFrameWidgetExample = () => (\n    <div className='display-flex justify-content-center'>\n        <div className='iframe-wrapper width-400'>\n            <IframeResizer src='https://menu.rio.cloud' />\n        </div>\n    </div>\n);\n\nexport default IFrameWidgetExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex justify-content-center\">\n    <div class=\"iframe-wrapper width-400\">\n        <iframe title=\"iframe\" src=\"https://menu.rio.cloud\" id=\"iFrameResizer0\" scrolling=\"no\" style=\"overflow: hidden; height: 250px;\">\n        </iframe>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "iframe in Fullscreen Dialog",
+      "body": "When having an iframe within a Dialog, for example to display a full fledged SPA, there are two ways to hide the SPA navigation. The best and cleanest way is to hide the navigation in the SPA, when it is loaded in an iframe. Another way is to use our no-application-header class. The iframe then has to be wrapped in a iframe-wrapper element.\n\nRIO iframes are transparent by default, also the SPA itself. Because of that you have to add the class \"bg-lighter\" to the iframe.",
+      "examples": []
+    },
+    {
+      "heading": "Additional iframe classes",
+      "body": "- Use unstyled to remove default iframe styling (Not necessary for widgets when using the iframe-resizer)\n- Use full-width for a full width iframe (Not necessary for widgets when using the iframe-resizer)\n- Use full-window for a full window (height/width) iframe based in the parent container\n- Use no-application-header for adding a -50px offset to hide the SPA navigation. Better solution is to not render the navigation within the iframe!\n- Use bg-XXX for having a iframe background color, as the default is transparent",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span>Open fullscreen dialog</span></button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useRef } from 'react';\n\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';\nimport Tooltip from '@rio-cloud/rio-uikit/Tooltip';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nconst IFrameInDialogExample = () => {\n    const [showDialog, setShowDialog] = useState(false);\n\n    const iframeRef = useRef<HTMLIFrameElement>(null);\n\n    const handleOpenInNewWindow = () => {\n        const currentIframeUrl = iframeRef.current?.contentWindow?.location.href;\n        window.open(currentIframeUrl, '_blank');\n    };\n\n    const body = (\n        <div className='iframe-wrapper'>\n            <iframe\n                title='uikit in fullscreen dialog'\n                className='unstyled bg-lighter full-window no-application-header'\n                src='/#start/intro'\n                ref={iframeRef}\n            />\n        </div>\n    );\n\n    const headerButtons = (\n        <OverlayTrigger placement='bottom' overlay={<Tooltip width='auto'>Open in new window</Tooltip>}>\n            <Button bsStyle='muted' iconOnly onClick={handleOpenInNewWindow}>\n                <span className='rioglyph rioglyph-new-window' />\n            </Button>\n        </OverlayTrigger>\n    );\n\n    return (\n        <>\n            <Button onClick={() => setShowDialog(true)}>\n                <span>Open fullscreen dialog</span>\n            </Button>\n            <Dialog\n                show={showDialog}\n                title='Service in a dialog'\n                bodyClassName='padding-0'\n                body={body}\n                onClose={() => setShowDialog(false)}\n                showCloseButton\n                bsSize={Dialog.SIZE_FULL_SCREEN}\n                headerButtons={headerButtons}\n            />\n        </>\n    );\n};\n\nexport default IFrameInDialogExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"iframe-wrapper\">\n    <iframe class=\"unstyled full-window no-application-header bg-lighter\" src=\"https://...\" />\n</div>"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Open a widget dialog in the parent application",
+      "body": "When it comes to opening a modal dialog from within an iframe, there's flexibility in how it can be presented. Depending on the context, the dialog might overlay the iframe content itself or seamlessly cover the entire parent application.\n\nFor opening a dialog in the parent application, the process typically involves sending a postMessage event from the iframe to the parent window. Upon receiving this event, the parent application responds by rendering a simple dialog, such as an InfoDialog, which includes another iframe pointing to a specific route within the widget. This embedded view then displays the dialog content and manages the dialog's close events. When it's time to close the dialog, the embedded view sends another postMessage to the parent application. This event allows the dialog view to send any necessary data back to the originating iframe.",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"iframe-wrapper\"><iframe title=\"iframe\" id=\"widgetDialogFrame\" src=\"https://uikit.developers.rio.cloud/#widgetDemo\" class=\"unstyled width-100pct\" style=\"width: 1px; min-width: 100%; overflow: hidden;\" scrolling=\"no\"></iframe></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\nimport IframeResizer from 'iframe-resizer-react';\n\nimport FrameDialog from '../../../../../../src/FrameDialog';\nimport { PREFIX } from '../../../widgets/WidgetDemo';\n\nconst IFrameWidgetExample = React.memo(() => {\n    return (\n        <>\n            <div className='iframe-wrapper'>\n                <IframeResizer\n                    id='widgetDialogFrame'\n                    src={`${window.location.origin}${window.location.pathname}#widgetDemo`}\n                    className='unstyled width-100pct'\n                    style={{ width: '1px', minWidth: '100%' }}\n                />\n            </div>\n            <FrameDialog\n                eventPrefix={PREFIX}\n                getSourceFrame={() => document.getElementById('widgetDialogFrame') as HTMLIFrameElement}\n            />\n        </>\n    );\n});\n\nexport default IFrameWidgetExample;\n\n// ----------------------------------------------------------\nimport { useState } from 'react';\n\nimport Button from '../../../../src/Button';\nimport { OPEN_DIALOG_EVENT, CLOSE_DIALOG_EVENT, OPEN_DIALOG_EVENT_TYPE } from '../../../../src/FrameDialog';\nimport usePostMessage, { type RemoteAction } from '../../../../src/usePostMessage';\n\nexport const PREFIX = 'EVENT_UIKIT_WIDGET_DEMO';\n\nconst WidgetDemo = () => {\n    const [messageFromDialog, setMessageFromDialog] = useState('-');\n\n    const { sendMessageToParent } = usePostMessage(PREFIX, (remoteAction: RemoteAction) => {\n        console.log(remoteAction);\n\n        if (remoteAction.type === `${PREFIX}${CLOSE_DIALOG_EVENT}`) {\n            setMessageFromDialog(remoteAction.payload);\n        }\n    });\n\n    const handleOpenDialog = () => {\n        const payload: OPEN_DIALOG_EVENT_TYPE = {\n            src: `${window.location.origin}${window.location.pathname}#widgetDemoDialog`,\n            dialogProps: {\n                bsSize: 'sm',\n            },\n        };\n\n        sendMessageToParent({\n            type: `${PREFIX}${OPEN_DIALOG_EVENT}`,\n            payload,\n        });\n    };\n\n    return (\n        <div className='bg-white border rounded padding-20 height-200'>\n            <div className='text-medium'>This is a widget embedded via an iframe</div>\n            <div className='btn-toolbar margin-top-20'>\n                <Button onClick={handleOpenDialog}>Open dialog in parent frame</Button>\n            </div>\n            <div className='margin-top-20'>\n                <label>Closing message from dialog:</label>\n                <div>{messageFromDialog}</div>\n            </div>\n        </div>\n    );\n};\n\nexport default WidgetDemo;\n\n// ----------------------------------------------------------\nimport Button from '../../../../src/Button';\nimport Dialog from '../../../../src/Dialog';\nimport usePostMessage from '../../../../src/usePostMessage';\nimport { CLOSE_DIALOG_EVENT } from '../../../../src/FrameDialog';\n\nimport { dummyText } from '../../utils/data';\nimport { PREFIX } from './WidgetDemo';\n\nconst WidgetDemo = () => {\n    const { sendMessageToParent } = usePostMessage(PREFIX);\n\n    const handleCloseDialog = () => {\n        sendMessageToParent({\n            type: `${PREFIX}${CLOSE_DIALOG_EVENT}`,\n            payload: 'hello from the dialog view',\n        });\n    };\n\n    return (\n        <div className='bg-white min-height-200'>\n            <Dialog.Title title='Widget dialog' onCloseButtonClick={handleCloseDialog} />\n\n            <Dialog.Body className='padding-20'>\n                <div className='text-medium'>This is the widget dialog content embedded via an iframe</div>\n                <p>{dummyText}</p>\n            </Dialog.Body>\n\n            <Dialog.Footer>\n                <div>\n                    <Button onClick={handleCloseDialog}>Close dialog in parent frame</Button>\n                </div>\n            </Dialog.Footer>\n        </div>\n    );\n};\n\nexport default WidgetDemo;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"iframe-wrapper\">\n    <iframe title=\"iframe\" id=\"widgetDialogFrame\" src=\"https://uikit.developers.rio.cloud/#widgetDemo\" class=\"unstyled width-100pct\" style=\"width: 1px; min-width: 100%; overflow: hidden; height: 200px;\" scrolling=\"no\">\n    </iframe>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/guidelines/obfuscate-data.json

@@ -0,0 +1,22 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:01.134Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/obfuscate-data",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/obfuscate-data",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "f5638d8237efbc3faa218a0c5dbd7fa40a58f241fb70751692a2d818952c18dd"
+  },
+  "title": "Obfuscate data",
+  "lead": "This demo demonstrates how sensitive data marked with the data-pii=\"visible\" attribute can be obfuscated directly in the frontend.",
+  "content": [
+    {
+      "heading": "Obfuscate data",
+      "body": "You can enable the feature either by using the keyboard shortcut Ctrl / CMD + Shift + U or by adding the data-hide-pii=\"shuffle\" attribute to the <html> element.\n\nPressing the shortcut once will shuffle the data. Pressing it again will apply a text mask. If you want to enforce one variant on page load, you can add data-hide-pii=\"shuffle\" or data-hide-pii=\"mask\" to the <html> element. By pressing the shortcut a third time, the original value will be visible again.\n\nDynamically added elements will immediately be obfuscated as long as the HTML attribute is available.\n\nWhat happens in detail:\n\n- Names: Non-letter characters are removed, the token is padded to at least 6 characters, shuffled, and returned in title-case. Pure-digit or non-letter tokens remain unchanged.\n- Emails: Punctuation is removed, each part is padded to 6 characters, shuffled and suffixed with .xx based on the browser locale.\n- Phone numbers: International prefixes (after +) are preserved, the remaining digits are shuffled, and original separators (spaces, dashes, parentheses) are kept.\n\nThis is useful for:\n\n- Debug or demo environments, where you want realistic data structure but no real identities.\n- Screenshot or recording safety, ensuring you don’t leak PII in support sessions or analytics.\n- QA/testing, to verify UI behavior without showing live customer data.\n\n> Tip: Use the \"Load more\" button to dynamically reveal additional obfuscated employees.",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/guidelines/print-css.json

@@ -0,0 +1,37 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:00.694Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/print-css",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/print-css",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "a82f58abd389f6f56c137456d8de0dfc2c807aeea678a53fb277304555ed1720"
+  },
+  "title": "Print CSS",
+  "lead": "The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.",
+  "content": [
+    {
+      "heading": "Print CSS",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "Utility classes",
+      "body": "A lot of our utility classes are available for different breakpoints and are already marked with aRESPONSIVElabel.\n\nNow those classes also are available forPRINT media queries.Example: display-inline-lsdisplay-block-print",
+      "examples": []
+    },
+    {
+      "heading": "Print area",
+      "body": "Activate the UIKIT print styles by adding printable-content to any wrapping container of ApplicationLayoutBody or\n\nApplicationLayoutSidebarin combination with the class print-area to one of them for having scoped printable content.\n\n```html\n<body class=\"printable-content\">\n    <div class=\"ApplicationLayoutSidebar print-area\"></div>\n</body>\n```\n\nWe suggest to add the class temporarily (1 second) when clicking a button and then trigger window.print()",
+      "examples": []
+    },
+    {
+      "heading": "Print content",
+      "body": "By adding the class non-printable to any element, you can hide it while printing.",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/guidelines/spinner.json

@@ -0,0 +1,144 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:02.885Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/spinner",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/spinner",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "63433e56eafb4c8b1a048f21f6cd2cbb08e40e8559e69f8093b327a4e71d1c51"
+  },
+  "title": "Loading guidelines",
+  "lead": "There are various approaches when it comes to loading data and showing the user the different stages of the loading process.",
+  "content": [
+    {
+      "heading": "Loading guidelines",
+      "body": "Here are some examples of using a Spinner to achieve a loading text and displaying loading results, either alone or in combination with other elements.\n\nLoading state in buttons\n\nUsing spinner as part of a button. This is useful to show an ongoing operation without removing the current UI or closing a form dialog and to show errors when operation failed.\n\nLoading state in buttons within tables\n\nThere are two ways to display a spinner inside a button when a long-running task is initiated. If the initial button doesn't have an icon, you can utilize the .btn-loading-overlay class to prevent the button size from changing. However, if the button already has an icon, you can substitute it with a spinner.\n\nIt is not recommended to use a button as .btn-block or to set it to 100% width as this can result in excessively large buttons when the column size is not specified or is too wide.\n\nLoading state in tables\n\nInstead of showing a spinner floating underneath an empty table, put it in a row at least. Don't show a table header alone without a tbody.\n\nIn some cases it is better to use placeholder for content to show the layout and some structure. Here you can use the ContentLoader to render the component without actual real values.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"height-100\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div><div class=\"spinnerText\">Loading</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"height-100\">\n    <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n        <div class=\"spinner\">\n            <div>\n            </div>\n            <div>\n            </div>\n            <div>\n            </div>\n            <div>\n            </div>\n        </div>\n        <div class=\"spinnerText\">Loading</div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "No trucks to show",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex align-items-center justify-content-center height-100\"><div class=\"text-center text-color-dark\"><i>No trucks to show</i></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex align-items-center justify-content-center height-100\">\n    <div class=\"text-center text-color-dark\">\n        <i>No trucks to show</i>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "No trucks to showAdd truck",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex align-items-center justify-content-center height-100\"><div class=\"text-center text-color-dark\"><div><i>No trucks to show</i></div><button class=\"btn btn-primary margin-top-15\" type=\"button\"><span class=\"rioglyph rioglyph-plus margin-right-5\"></span><span>Add truck</span></button></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex align-items-center justify-content-center height-100\">\n    <div class=\"text-center text-color-dark\">\n        <div>\n            <i>No trucks to show</i>\n        </div>\n        <button class=\"btn btn-primary margin-top-15\" type=\"button\">\n            <span class=\"rioglyph rioglyph-plus margin-right-5\">\n            </span>\n            <span>Add truck</span>\n        </button>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column align-items-center justify-content-center height-100\"><label>Click me</label><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-weather-sunny text-bold\"></span><span>Generating sunshine</span></button></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column align-items-center justify-content-center height-100\">\n    <label>Click me</label>\n    <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">\n        <span class=\"rioglyph rioglyph-weather-sunny text-bold\">\n        </span>\n        <span>Generating sunshine</span>\n    </button>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 5",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex align-items-center justify-content-center height-100\"><button class=\"btn btn-primary btn-loading disabled\" type=\"button\">Generating foobar</button></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex align-items-center justify-content-center height-100\">\n    <button class=\"btn btn-primary btn-loading disabled\" type=\"button\">Generating foobar</button>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 6",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><table class=\"table table-bordered table-head-filled\"><thead><tr><th>Column 1</th><th class=\"text-center\">Column 2</th></tr></thead><tbody><tr><td>Lorem ipsum</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-cloud-download\"></span>Foobar</button></td></tr></tbody></table></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<table class=\"table table-bordered table-head-filled\">\n    <thead>\n        <tr>\n            <th>Column 1</th>\n            <th class=\"text-center\">Column 2</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>Lorem ipsum</td>\n            <td class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">\n                    <span class=\"rioglyph rioglyph-cloud-download\">\n                    </span>Foobar</button>\n            </td>\n        </tr>\n    </tbody>\n</table>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 7",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><table class=\"table table-bordered table-head-filled\"><thead><tr><th>Column 1</th><th class=\"text-center\">Column 2</th></tr></thead><tbody><tr><td>Lorem ipsum</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Foobar</button></td></tr></tbody></table></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<table class=\"table table-bordered table-head-filled\">\n    <thead>\n        <tr>\n            <th>Column 1</th>\n            <th class=\"text-center\">Column 2</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>Lorem ipsum</td>\n            <td class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Foobar</button>\n            </td>\n        </tr>\n    </tbody>\n</table>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 8",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column align-items-center justify-content-center height-100 position-relative padding-5 table-responsive\"><table class=\"table table-bordered table-head-filled\"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th></tr></thead></table><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div><div class=\"position-absolute top-0 right-0 bottom-0 left-0 bg-warning opacity-10\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column align-items-center justify-content-center height-100 position-relative padding-5 table-responsive\">\n    <table class=\"table table-bordered table-head-filled\">\n        <thead>\n            <tr>\n                <th>Column 1</th>\n                <th>Column 2</th>\n                <th>Column 3</th>\n                <th>Column 4</th>\n            </tr>\n        </thead>\n    </table>\n    <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n        <div class=\"spinner\">\n            <div>\n            </div>\n            <div>\n            </div>\n            <div>\n            </div>\n            <div>\n            </div>\n        </div>\n    </div>\n    <div class=\"position-absolute top-0 right-0 bottom-0 left-0 bg-warning opacity-10\">\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 9",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-column align-items-center justify-content-center height-100 position-relative padding-5 table-responsive\"><table class=\"table table-bordered table-head-filled\"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th></tr></thead><tbody><tr><td colspan=\"4\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div></td></tr></tbody></table></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-column align-items-center justify-content-center height-100 position-relative padding-5 table-responsive\">\n    <table class=\"table table-bordered table-head-filled\">\n        <thead>\n            <tr>\n                <th>Column 1</th>\n                <th>Column 2</th>\n                <th>Column 3</th>\n                <th>Column 4</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td colspan=\"4\">\n                    <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n                        <div class=\"spinner\">\n                            <div>\n                            </div>\n                            <div>\n                            </div>\n                            <div>\n                            </div>\n                            <div>\n                            </div>\n                        </div>\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 10",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"padding-top-10 padding-bottom-10\"><div class=\"panel panel-default\"><div class=\"panel-heading\"><svg aria-labelledby=\"wx7vjbl-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader max-width-300 \"><title id=\"wx7vjbl-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#wx7vjbl-diff)\" style=\"fill: url(&quot;#wx7vjbl-animated-diff&quot;);\"></rect><defs><clipPath id=\"wx7vjbl-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"wx7vjbl-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></div><div class=\"panel-body\"><svg aria-labelledby=\"djyw9fc-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"djyw9fc-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#djyw9fc-diff)\" style=\"fill: url(&quot;#djyw9fc-animated-diff&quot;);\"></rect><defs><clipPath id=\"djyw9fc-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"djyw9fc-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg><svg aria-labelledby=\"h9xmysq-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"h9xmysq-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#h9xmysq-diff)\" style=\"fill: url(&quot;#h9xmysq-animated-diff&quot;);\"></rect><defs><clipPath id=\"h9xmysq-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"h9xmysq-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg><svg aria-labelledby=\"lmhgtra-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader width-60pct \"><title id=\"lmhgtra-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#lmhgtra-diff)\" style=\"fill: url(&quot;#lmhgtra-animated-diff&quot;);\"></rect><defs><clipPath id=\"lmhgtra-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"lmhgtra-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"padding-top-10 padding-bottom-10\">\n    <div class=\"panel panel-default\">\n        <div class=\"panel-heading\">\n            <svg aria-labelledby=\"wx7vjbl-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader max-width-300 \">\n                <title id=\"wx7vjbl-aria\">Loading...</title>\n                <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#wx7vjbl-diff)\" style=\"fill: url(&quot;#wx7vjbl-animated-diff&quot;);\">\n                </rect>\n                <defs>\n                    <clipPath id=\"wx7vjbl-diff\">\n                        <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                        </rect>\n                    </clipPath>\n                    <linearGradient id=\"wx7vjbl-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                        <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                        </animateTransform>\n                    </linearGradient>\n                </defs>\n            </svg>\n        </div>\n        <div class=\"panel-body\">\n            <svg aria-labelledby=\"djyw9fc-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                <title id=\"djyw9fc-aria\">Loading...</title>\n                <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#djyw9fc-diff)\" style=\"fill: url(&quot;#djyw9fc-animated-diff&quot;);\">\n                </rect>\n                <defs>\n                    <clipPath id=\"djyw9fc-diff\">\n                        <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                        </rect>\n                    </clipPath>\n                    <linearGradient id=\"djyw9fc-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                        <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                        </animateTransform>\n                    </linearGradient>\n                </defs>\n            </svg>\n            <svg aria-labelledby=\"h9xmysq-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                <title id=\"h9xmysq-aria\">Loading...</title>\n                <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#h9xmysq-diff)\" style=\"fill: url(&quot;#h9xmysq-animated-diff&quot;);\">\n                </rect>\n                <defs>\n                    <clipPath id=\"h9xmysq-diff\">\n                        <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                        </rect>\n                    </clipPath>\n                    <linearGradient id=\"h9xmysq-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                        <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                        </animateTransform>\n                    </linearGradient>\n                </defs>\n            </svg>\n            <svg aria-labelledby=\"lmhgtra-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader width-60pct \">\n                <title id=\"lmhgtra-aria\">Loading...</title>\n                <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#lmhgtra-diff)\" style=\"fill: url(&quot;#lmhgtra-animated-diff&quot;);\">\n                </rect>\n                <defs>\n                    <clipPath id=\"lmhgtra-diff\">\n                        <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                        </rect>\n                    </clipPath>\n                    <linearGradient id=\"lmhgtra-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                        <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                        </stop>\n                        <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                        </stop>\n                        <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                        </animateTransform>\n                    </linearGradient>\n                </defs>\n            </svg>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 11",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><table class=\"table table-condensed\"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th></tr></thead><tbody><tr><td><svg aria-labelledby=\"xt5q6q-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"xt5q6q-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#xt5q6q-diff)\" style=\"fill: url(&quot;#xt5q6q-animated-diff&quot;);\"></rect><defs><clipPath id=\"xt5q6q-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"xt5q6q-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"734l9vr-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"734l9vr-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#734l9vr-diff)\" style=\"fill: url(&quot;#734l9vr-animated-diff&quot;);\"></rect><defs><clipPath id=\"734l9vr-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"734l9vr-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"3fyby96-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"3fyby96-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#3fyby96-diff)\" style=\"fill: url(&quot;#3fyby96-animated-diff&quot;);\"></rect><defs><clipPath id=\"3fyby96-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"3fyby96-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"e955hfd-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"e955hfd-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#e955hfd-diff)\" style=\"fill: url(&quot;#e955hfd-animated-diff&quot;);\"></rect><defs><clipPath id=\"e955hfd-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"e955hfd-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td></tr><tr><td><svg aria-labelledby=\"aongodu-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"aongodu-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#aongodu-diff)\" style=\"fill: url(&quot;#aongodu-animated-diff&quot;);\"></rect><defs><clipPath id=\"aongodu-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"aongodu-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"q5xsgo9-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"q5xsgo9-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#q5xsgo9-diff)\" style=\"fill: url(&quot;#q5xsgo9-animated-diff&quot;);\"></rect><defs><clipPath id=\"q5xsgo9-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"q5xsgo9-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"38i8il-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"38i8il-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#38i8il-diff)\" style=\"fill: url(&quot;#38i8il-animated-diff&quot;);\"></rect><defs><clipPath id=\"38i8il-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"38i8il-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"rvxwwmv-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"rvxwwmv-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#rvxwwmv-diff)\" style=\"fill: url(&quot;#rvxwwmv-animated-diff&quot;);\"></rect><defs><clipPath id=\"rvxwwmv-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"rvxwwmv-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td></tr><tr><td><svg aria-labelledby=\"mozhtq-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"mozhtq-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#mozhtq-diff)\" style=\"fill: url(&quot;#mozhtq-animated-diff&quot;);\"></rect><defs><clipPath id=\"mozhtq-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"mozhtq-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"rmj3jr-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"rmj3jr-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#rmj3jr-diff)\" style=\"fill: url(&quot;#rmj3jr-animated-diff&quot;);\"></rect><defs><clipPath id=\"rmj3jr-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"rmj3jr-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"lmkvef-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"lmkvef-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#lmkvef-diff)\" style=\"fill: url(&quot;#lmkvef-animated-diff&quot;);\"></rect><defs><clipPath id=\"lmkvef-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"lmkvef-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"si3ftew-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"si3ftew-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#si3ftew-diff)\" style=\"fill: url(&quot;#si3ftew-animated-diff&quot;);\"></rect><defs><clipPath id=\"si3ftew-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"si3ftew-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td></tr></tbody></table></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<table class=\"table table-condensed\">\n    <thead>\n        <tr>\n            <th>Column 1</th>\n            <th>Column 2</th>\n            <th>Column 3</th>\n            <th>Column 4</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>\n                <svg aria-labelledby=\"xt5q6q-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"xt5q6q-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#xt5q6q-diff)\" style=\"fill: url(&quot;#xt5q6q-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"xt5q6q-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"xt5q6q-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"734l9vr-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"734l9vr-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#734l9vr-diff)\" style=\"fill: url(&quot;#734l9vr-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"734l9vr-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"734l9vr-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"3fyby96-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"3fyby96-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#3fyby96-diff)\" style=\"fill: url(&quot;#3fyby96-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"3fyby96-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"3fyby96-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"e955hfd-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"e955hfd-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#e955hfd-diff)\" style=\"fill: url(&quot;#e955hfd-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"e955hfd-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"e955hfd-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n        </tr>\n        <tr>\n            <td>\n                <svg aria-labelledby=\"aongodu-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"aongodu-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#aongodu-diff)\" style=\"fill: url(&quot;#aongodu-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"aongodu-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"aongodu-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"q5xsgo9-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"q5xsgo9-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#q5xsgo9-diff)\" style=\"fill: url(&quot;#q5xsgo9-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"q5xsgo9-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"q5xsgo9-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"38i8il-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"38i8il-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#38i8il-diff)\" style=\"fill: url(&quot;#38i8il-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"38i8il-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"38i8il-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"rvxwwmv-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"rvxwwmv-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#rvxwwmv-diff)\" style=\"fill: url(&quot;#rvxwwmv-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"rvxwwmv-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"rvxwwmv-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n        </tr>\n        <tr>\n            <td>\n                <svg aria-labelledby=\"mozhtq-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"mozhtq-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#mozhtq-diff)\" style=\"fill: url(&quot;#mozhtq-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"mozhtq-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"mozhtq-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"rmj3jr-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"rmj3jr-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#rmj3jr-diff)\" style=\"fill: url(&quot;#rmj3jr-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"rmj3jr-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"rmj3jr-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"lmkvef-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"lmkvef-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#lmkvef-diff)\" style=\"fill: url(&quot;#lmkvef-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"lmkvef-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"lmkvef-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"si3ftew-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"si3ftew-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#si3ftew-diff)\" style=\"fill: url(&quot;#si3ftew-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"si3ftew-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"si3ftew-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n        </tr>\n    </tbody>\n</table>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}