Page

The Page Block is a powerful block that allows you to create complex projects by adding depth to them. This block enables you to create a link to another page, which will be nested within the current page. The Page Block offers several customization options to ensure it aligns with the specific needs of your project.

For instance, in a blog scenario, you can include a summary and a cover image within the Page Block, where the block represents an article of the blog. This allows you to enhance the visual appeal and provide a brief overview of the content.

Example: (Try to click on it)

This is an example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of...

Here the page block is used with this setup:

Options:

• Layout:
• Only Text - Display only the title of the page block without images
• With Image - Allow to add an image to the page block
• Display:
• Page Summary: If checked it will add a summary under the title (see the example above)

Table

Create a simple table with a heading row. You can add multiple rows and columns to the table. However, please note that it does not support inline styling at the moment. If you need a more complex table, you have the option to create your own table using the HTML block. Alternatively, you can import a table from another application using the HTML block and embedding it within an iframe.

(See the Html block for more information)

example:

Expandable

The expandable block is an important block in Notice. It enables the creation of some nested content. An expandable consists of two parts: the first part is the text that will be displayed at all times, and the second part is the nested content. On the published version, the user can display or hide the nested content by clicking on the small arrow on the right side or simply by clicking on the first part.

The expandable block provides a convenient way to create your FAQ (Frequently Asked Questions) in a simple and straightforward manner.

Example: (In this case, an HTML block has been utilized to display an iframe containing the Notice FAQ. You can find the code to replicate it below.)

Code:

<iframe
    id="notice-iframe-faq"
    title="Notice FAQ"
    src="https:///notice-faq.mynotice.io"
    style="height: 500px; width: 100%;"
    frameborder="0"
  ></iframe>

Html

The HTML block allows you to surpass the limitations of Notice. It grants you the freedom to write any HTML code, apply CSS styles, and add scripts to your block. If you want to embed content for which we don't have a dedicated block, you can utilize the HTML block to create an iframe and embed your desired link within it.

Example: (The code used for each example can be observed below each respective example.)

Wikipedia in an iframe:

<iframe
    id="wiki-page"
    title="Wikipedia"
    src="https://www.wikipedia.org/"
    style="height: 500px; width: 100%;"
    frameborder="0"
  ></iframe>

Default button example:

   <style>
       .flex-button {
  width: 130px;
  height: 40px;
  border: none;
  background-color: #ff3466 !important;
  color: #FFF !important;
  border-radius: 6px;
  font-size: 18px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
          overflow: hidden;
          transition: all 0.2s;
  margin: auto;
  display: flex;
          align-items: center;
    }
</style>
<button
    class='flex-button'
   onclick="alert('🔥 this button is created with the HTML block 🔥')"
   role="button">
 click me 🤩
</button>

Javascript

Within this block, you have the capability to implement JavaScript code on your page.

Example:

Clicking on this page bellow should trigger an alert, you'll find the code used in the page