Center or left alignment of content for cards?

Hi there,

I am wondering if I should be using left or centered aligned text for my cards.

I have a few sections; news which I have left aligned as it may have more text, like this:

image

I have also got other cards, but I am not sure if I should be using left or centered aligned text. Is it ok to mix these or is it better practice to keep things consistent?

These are some cards that have center and left aligned text.

What do you think is easier to read and also looks nicer? Any feedback would be great, thanks!

IMHO, the left aligned because it becomes balanced by the heart icon.

But if the Read more link takes you to a center aligned text, then I would probably prefer it centered. :slight_smile:

I much prefer the centred text, although you might get more accurate feedback if you show a series of each, to give a better idea of how they would look in context on the page.

Thanks for the feedback.

Below is an example of some options:

LEFT:

CENTER:

MIXTURE:

1 Like

Thank you. smile

I still prefer all centred. However, all aligned left is definitely better than a mixture.

(In my opinion - and I’ve never claimed to be typical. smile)

I like the mixed versions best. :slight_smile:

The news Read more, I expect goes to some text paragraphs.

The business listing boxes has a heading and a Browse more button that’s also center aligned, so they could be centered too, making a consistent display

Edit)
The news boxes has a left aligned heading, making also their display consistent.

Thanks again for the feedback.

Yes I guess it makes sense to have each section consistent with the heading/buttons.

The news titles/paragraphs will open into a new page which will be link an article page so the text would e left aligned.

The business listing cards will open to a listing page which will also have left aligned text, but I guess this isn’t too relevant to the alignment on the homepage.

1 Like

I found the following book a very useful and very simple guide to this sort of question. It is about print design but the same basic principles apply.

I prefer to use the CSS dl, dt and dd tags which have defaults margins and paddings. Font size, background colors, etc can be applied to the blocks.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

My vote would be for the mixed option.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.