How to update ViewAll Content Page

Page Title

  • title of the page that will be displayed when integrated in ViewAll app
  1. Add a new paragraph <p></p>
  2. Click Block button on the right navigation
  3. Click Advanced and on the ADDITIONAL CSS CLASS(ES) field, provide vac-page-title

Page Section

  • block/group of elements being displayed on a page. This section add a default spacing between other sections on the page.
  1. Create a new Group
  2. Click Block button on the right navigation
  3. Click Advanced and on the ADDITIONAL CSS CLASS(ES) field, provide vac-section
  4. Add the elements you want to be included inside the section

Section Card

  • Elements inside a section with card style
  1. Create a new Page Section (see above)
  2. Create a new Group
  3. Click Block button on the right navigation
  4. Click Advanced and on the ADDITIONAL CSS CLASS(ES) field, provide vac-card
  5. Add a new paragraph <p></p> for the card title and provide vac-title as additional class
  6. Add a new paragraph <p></p> for the contents of the card, no need to add additional class
  7. If a subtitle is needed, add a new paragraph <p></p> and provide vac-subtitle as additional class

Section Table

  • Table inside a section
  1. Create a new Page Section (see above)
  2. Add a new paragraph <p></p> for the section title and provide vac-title as additional class
  3. Create the table
  4. If the table should take the full width add vac-full-table as additional class

Reminders on creating content

  • Do not forget to add the classes on the contents
  • Grouping the elements by section is recommended to maintain the default spacing for the page

References

ADDITIONAL CSS CLASS(ES)

ClassDescription
vac-page-titleuse once; this will be for the actual page title used by the app
vac-titlecan be used inside vac-section or vac-card;
vac-subtitlecan be used inside vac-section or vac-card;
vac-sectionuse this to group elements and apply the default spacing for the page
vac-carddisplay content inside a card
vac-full-tabledisplay a table on full width of the page

ViewAll Page

Adding class name