Target Pseudo Class

Comments:  On a page with a lot of text the menu buttons serve as bookmarks or shortcuts to certain paragraphs, and when clicking on a button, the corresponding paragraph pops out and positions itself just in front of your eyes. Click on the paragraph or beside it to let it go back into its space.

This is achieved for the paragraphs by selecting 'Target' in 'Pseudo Selectors and Dynamic Classes', thus adding it to the 'In State' dropdown in the Styles pane in SD. The box-shadow and larger font-size styles of the paragraphs are made while the 'In State' setting is 'Target'.

If you have more pages and copy/paste this menu on the other pages too, you can click on one of the buttons and get to the corresponding paragraph on the page where it is sitting. Editing the links will be necessary, of course.

The other text is just random paragraphs from some of the other pages. 

The accordion can be used to hide / reveal more details about something, or for definitions, 'read more...' and such. They are easily created, the most difficult part seems to be spelling the word 'accordion' correctly! (Against some people's belief, it's NOT 'accordian'!).

A quick way to get back to the previous page. It is just a styled button with some js in the linking.

A border can be added around it if you like. This has been done here. A further option might be to add some drop-shadow.

This minimalistic footer has just room for a small piece of text and some links. You may of course extend it and add some more if needed.
Placeholder Picture

With this component you can compare two images, something old with something new, or other events, like before and after Covid. The 'before' image is a background image, and the 'after' one is a 'normal' image which is hidden at first.

One important tip: It is best to avoid moving the slider handle while working in the app. It may easily slip out of position and hide somewhere down the page. No risk of that in preview, though.

However, if this should happen, open the element tree and look for the class .handle. Drag it up so it is sitting inside the container .slider, which again is inside the .range-container. Or to describe it in another way: The correct position is right above the html element .pertaining-to-thumb, and with the same indentation, when you look at it in the element tree.