Fieldset
Although a fieldset is most commonly used for creating an enclosure for form elements, it can be used to visually define any type of content.
The fielset draws a border around the content and this can be styled for width, type, color and radius. It indicates to the search engines that the content inside is related.
Legend
The legend acts as a caption for the fieldset content. It is inserted in a break in the border. The default alignment is left and the inset can be adjusted using a value for left margin.
The position of the legend can be changed using text align and it can spaced away from the fieldset edge using left/right padding.
Check out the functions for the responsive image …
- The image with alt text is optional
- The images were resized and optimised before importing into EverWeb
- The full size image in the example is 960 x 640px
- The medium image is 600 x 400px
- The optional portrait image for phones is 400 x 400px
- Images have a lazy loading function
- All images on a responsive website should be lazy loaded if not in view at page load
- The image has controls for border width and color
List
The list can have a max width. It be positioned left or center and the list items have an adjustable inset. The items have a custom marker using the CSS equivalent of a HTML symbol inserted using a ::before pseudo-element.
The marker has controls for size, color and spacing from the list item text.
Link
The optional - one or two - links open an internal page and have a background hover transition when viewed on computers.