Business Page

Contributed by Richard Lee

Introduction

The Blocks Business page is a page that is designed to be used to showcase the layout and concept of designing and building a website using the Blocks Framework's design components.

In particular, this page is designed to demonstrate the thought process, implementation and development of a Higher Education's Landing Page. In our example, we implemented a clean and simple design that incorporates a single CTA at the top of the page, followed by a series of sections that are designed to showcase the different areas of the Education faculty.

The Business page is designed for both mobile and desktop. It is responsive and will adjust to the screen size.

Usability

The Blocks Business page is designed to be responsive and will adjust to the screen size. This component is designed to be used in a variety of situations, and we have followed the official guidelines from W3 to design this component.

Please note that since this is a page module, we have implemented a single unified set of code for both Desktop and Mobile layouts. Apart from the "Desktop" and "Mobile" views that are provided in the Blocks External Viewer, you can also resize your browser window to view all CSS page layouts in between.

The font used in this component is Inter, which is a font designed for screens. It is a sans-serif font that is easy to read on screens. You can find the font in the link tag in the head tag of the index.html file.

All images in the example include alt tags, which is a requirement for accessibility. The alt tag is used to describe the image to the users, and it is used by screen readers to describe the image to the users. We strongly recommend the alt tags not be deleted or modified when using this component code.

Please double-check and confirm the following HTML code in the head tag of your index.html file to ensure the component is responsive, this is a requirement for accessibility and is recommended by W3:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Version