News Card Component
Context
The Homepage will feature 3 levels of News "from local to global": FC Hamburg, FC Network, FC Global. The Content is organised blog-like, we call it "News". Events will also be handled as news and being edited in the same system. At best, there are two different news templates for editors, optimized for either a classic article post or an event announcement. The News can be filtered between "Articles" and "Events".
There are 2 designs for the News Cards: The card slider and the card list. The card list is used compactly under an article for related content.
Figma Component Design
Figma Page Preview
- Desktop: https://www.figma.com/file/ypzBR4RDU1aRGWzebJY08B/FCOS-Hamburg?node-id=2175%3A87523
- Mobile: https://www.figma.com/file/ypzBR4RDU1aRGWzebJY08B/FCOS-Hamburg?node-id=2175%3A85919
Responsive behaviour
- GENERAL: Fluid
- EXAMPLE: IKEA Card Slider: https://www.ikea.com/de/de/ideas/#:~:text=Ideen-,Inspiration%20%26%20Tipps,-Liste%20%C3%BCberspringen
Acceptance criteria
USER
- Can click on the cards and gets to the article page (e.g. here)
- Hover-Effect for the Cards: Underline the Title (the hole card is an active field to hover/click)
Backend Information
ADMIN
- Can choose between 2 general content templates: "Article" or "Event" (Template contents tbd)
- Has to choose one of the 3 levels for the news: FC Hamburg, FC Network, FCF Global
- For Hamburg: Can choose a color for the card from a predfined colorrange
- Can choose News Categories that appear as badges on bottom of the card (Category management tbd!!!)
- Can choose if it is a EU-funded project so a "EU-project" badge appears on the top of the card
- ... tbd
Tasks
-
… -
…