Using a coloured background on the first component on the page
Using a coloured background on the first component on the page leaves a weird white gap and looks like a mistake, adding to this, having lots of lead text on a bright background makes it really hard to read and is a bit annoying for the user - you are probably feeling that now if you bothered to read this which you probably didn't because it's hard to read.
Party like it's 1999!
This card does have a link, this is how cards should be used. The user will appreciate this card.
This card has no link
Card should provide navigation to other content. Having a card with no link next to a card with a link is confusing.
Images with text embedded
They are pointless, as the text should be in the card text. Not good for accessibility and also don't crop as to allow for the content. If creative content is required use a banner set.
This is a section header
Try and only have one in the users view at a time - use sparingly.
Too many section headers can be a bit overwhelming.
This is another section header
This is annoying eh?
Lorem ipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
This is a section header in correctly formatted
This is not our style - the text is supposed to be black.
If the heading has a vertical yellow line it should have black text. To fix remove the class in the source and re-apply the style you want to use.
These 'Horizontal' cards aren't suitable for lot's of text
Too much text on the cards - they look weird right?
This card has too much text for the layout of the card
If the card start falling apart like this it means you need to choose a different type of card, use less text - or not use a card for this content. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
This doesn't look great
This card also has no link so the heading deosn't match the other card. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
These 'Wide cards' ones look better for this amount of text
But it would look better if the cards all had a similar amount of text - and all had links.
This card has quite a bit of text
If the card start falling apart like this it means you need to choose a different type of card, use less text - or not use a card for this content. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
This card has no link
Also it has only a small amount of text so it looks a bit odd grouped with the others..
This card also has quite a bit of text
If the card start falling apart like this it means you need to choose a different type of card, use less text - or not use a card for this content. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
This card also has way too much text proving that even this card has it's limits
This is not what cards are supposed to be used for - in this case it should be text in the RTE.
If the card start falling apart like this it means you need to choose a different type of card, use less text - or not use a card for this content. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
If the card start falling apart like this it means you need to choose a different type of card, use less text - or not use a card for this content. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
If the card start falling apart like this it means you need to choose a different type of card, use less text - or not use a card for this content. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Find out more about what? The button opposite has no context, it should be grouped with some text that explains what the action is for. Someone using a screen reader will not know what it's for especially if there are multiple links and CTA's on the page.
Our CMS allows us to do these things - but we shouldn't because they are not helping us to make a donsistent user experience that reflects our brand.
Coloured background in grid areas
And cards that don't fit properly
It's getting squished in here
This card does have a link, this is how cards should be used. The user will appreciate this card.
I can't breathe
Card should provide navigation to other content. Having a card with no link next to a card with a link is confusing.
Someone has to go
They are pointless, as the text should be in the card text. Not good for accessibility and also don't crop as to allow for the content. If creative content is required use a banner set.
Coloured background on card in sidebar
There is no need for this.
Card not suitable for space
There is no need for this.
Card in left sidebar
Doesn't work.
Student profile in grid area - it doesn't work
“I didn't know that a career in medicine was an option for me as a mature-age student without an OP score until I began studying at UniSC, which helped me identify my strengths and gave me the confidence to pursue the goal of becoming a medical doctor.”
Happy accidents
Many of the above bloopers are accidents that can easily happen - good news is there are also some undiscovered gems we can actually use.
This is a Breakout quote
This was a Breakout quote but I changed my mind and made it an intro, it still has the yellow bar from the Breakout - but has the text styling of the introduction. Although this is a blooper - I think it's a useful one. And it's not a technical blooper - it just has two classes applied - which is valid css. Keep it up you sleev for special cases.