CSS Placement for UI page

Hi Team,

I am struggling with arranging/placing the text/Container/label files with reference to CSS. The screenshot one shows the ideal placements of how it should look like  while the second screenshot shows about my struggles to place them .
I am attaching my .oml file for reference. Please revert with possible help.

A Detailed analysis of my issues are given below-
Need to add 'Tasks' Label above audit workboard

arrange the text and container files inside each card container

create a onclick of when clicked on AuditWorkboard card container it should go to the claim summary screen

Revmaxclaimsummarypage.oml

Solution

Hello saif sheikh,

You should see the components you have available... Check the components on the style guide before trying to do something if there is something that is almost equal to what you want you should use. In this case, you have the card item.

Then if you want to change the height is just a way of using the extended class using the padding class. Because what is giving the height is the paddings

Please avoid inline styles...

Dont forget to remove the widths when you want to put everything in the same line. in this case, I want to put the icon at front of the expression that says Audit workboard.

And use always classes. you can check on the style guide for the class you can use too.

Result:

Now you just need to do the same for the others.

Kind Regards,

Márcio

Hi Márcio Carvalho,
Almost completed with the task.
need to remove the horizontal space from left below reference data and insights so that all the card containers are aligned . Also, if you could review my .oml that would be great. Marking your answer as solution since the original question has been resolved. Thank you so much


Revmaxclaimsummarypage.oml

Solution

Remove the Auto property.


If you remove that it will work  :)

Kind Regards,

Márcio

Solution

Hello saif sheikh,

You should see the components you have available... Check the components on the style guide before trying to do something if there is something that is almost equal to what you want you should use. In this case, you have the card item.

Then if you want to change the height is just a way of using the extended class using the padding class. Because what is giving the height is the paddings

Please avoid inline styles...

Dont forget to remove the widths when you want to put everything in the same line. in this case, I want to put the icon at front of the expression that says Audit workboard.

And use always classes. you can check on the style guide for the class you can use too.

Result:

Now you just need to do the same for the others.

Kind Regards,

Márcio

Hi Márcio Carvalho,
Almost completed with the task.
need to remove the horizontal space from left below reference data and insights so that all the card containers are aligned . Also, if you could review my .oml that would be great. Marking your answer as solution since the original question has been resolved. Thank you so much


Revmaxclaimsummarypage.oml

Solution

Remove the Auto property.


If you remove that it will work  :)

Kind Regards,

Márcio

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.