Content

Blocks of content refers to examples and methods of how to place information within your website templates. These can include only text based content, content with media or content for a particular module - such as news and blogs.

Text based content blocks

Text based content blocks refers to the sections on your website that help you add content - such as the about page, the privacy policy, a blog article ...etc. Let us further divide the category into various block types usable.

Content for a page

Content block for full screen

When you want to place your content at the full width of a page, you must always visualise your content being divided into 2 columns. Use this block only if the content that you need to add has no other headings within them. The example below will auto divide the content.


Media based content blocks

The blocks with media allow you to add content with a relative image or video next to it. This helps when there is reference to the media element within the content.

Content block with image on the left

To accurately control the height of the image, we wrap the image in a container and control the height of the container. The image will always be set to cover the container. The container is set to ` pt-80 ` on tablets and desktop and ` pt-64 ` on mobile. This is to ensure that the image is always displayed at the same height on all breakpoints.

To change the height of the image in your block, you can change the value indicated above.

Content block with image on the right, but stacked on mobile

When the media object is added to the right, you may still want it stack on top of the content when it comes to mobile devices. This example does exactly that.


Call to action content blocks

These content blocks are useful to grab attention, to get the use to navigation to a certain section or provide futher information to the content on the page.

Left aligned CTA

Center aligned CTA


Previous
Blocks
Sign up for our newsletter
Receive the latest updates from the UAE Design System
TDRA empowers youth for a sustainable future
What's new
Sustainable by design

Sustainable web design is the practice of designing and developing websites that have a low environmental impact.

Read More