Article card
Introduction
The article card Figma component is used to preview content such as news, guides, or events in a list or grid. It comes in two orientations, vertical and horizontal, making it suitable for both grid layouts and more compact lists.
This guide explains how to use the article card component in your designs in Figma.
Interactive demo
Check out the interactive demo below to explore different configurations of the article card:
Note for developers:
The article card pattern is not available as a React
component, the demo above is built using <Box>,
<Inline>, and <Grid>.
Vertical
The vertical variant is most commonly used for grids of articles with a horizontal direction. Articles can be placed directly on the page or within a Section. For vertical cards, you can consider hiding the content slot (only having the image and title) to keep the grid visually clean and simple.
Horizontal
The horizontal variant is most commonly used for lists of articles with a vertical direction. Articles can be placed directly on the page or within a Section. It can also be used for cards with a larger image, such as a featured article at the top of a page. The image can be positioned on either the left or right side of the content, depending on the layout and design.
Padding
Use the No padding variant when you want the image to fill out to the edges of the card, e.g. for feature articles. Use the Padding variant when you want to keep a consistent spacing around the image, e.g. for cards in a grid or list.
The horizontal variant intentionally has more padding around the image (16px) than the vertical variant (8px). This is because the horizontal variant is primarily used for lists, while the vertical variant is used in grids where cards are placed closer together. The additional padding for horizontal cards also works well for cards with larger images, such as featured articles.
Border or shadow
By default, the article card has no border or shadow. This keeps the component visually lightweight and works well when cards are grouped together in a grid or list in a Section. However, if you want to create more visual separation between the card and its surroundings, you can add a border or shadow. Keep in mind that shadows can be more visually heavy than borders in a section, so we recommend using card with shadows directly on the page.
- Border: Use bfc-base-c-dimmed in Figma
- Shadow: Use drop bottom soft in Figma
Use either a border or a shadow rather than combining both, unless there is a specific design need.
Description
The description is an optional text element displayed below the title. Use it to provide a short summary or additional context about the article. Keep the description concise and relevant to the title.
The description can also be used as a description for service cards. If you are using a larger logo, adding a description helps align the logo and title areas, keeping them at the same height.
- 49 x 49 px logos for larger service cards
- 24 x 24 px logos for smaller service cards (without a description)
Hover effects
The article card has a hover effect that applies to the entire card. When a user hovers over the card, an underline is added to the article title to indicate that the card is interactive. This functionality needs to be implemented in code.
You can also use other hover effects when appropriate. For example, if the card has a shadow, you can add a dimmed border on hover to provide additional visual feedback. For more expressive interactions, such as scaling up the image on hover, these effects can be implemented in the coded version of the component.
Non-clickable cards
Non-clickable cards are used when the card does not have any interactive elements. They are typically used for displaying information or content without the need for user interaction. If the card is not clickable, it should not have any hover effects or links, unless there is ellipsis in the title or description, in which case a tooltip can be used to display the full text. More information can be found at Ellipsis.
Fixed height or width for images
If you want a fixed height or width on the image, instead of it resizing with the card:
- Select the Image slot layer and change its resizing from Hug contents / Fill container to Fixed height (or fixed width). Set the image to Fill container in both directions.
- Alternatively, add an auto layout frame inside Slot image — for example a "Fixed-wrapper" — and set the fixed height on that frame instead. The image inside the frame should be set to Fill container in both directions so it scales with the frame.
- If you swap the image, make sure to place the new image inside the Fixed-wrapper layer so it keeps the fixed height. Use the image's alignment to control which part of it is cropped.
Slot in the component
Image
You can use any image in the Image slot, but use only one image at a time. If adding an image, just remove the default image. For images, you can use the Unsplash plugin in Figma, or choose one of the illustrations from the Bifrost illustration library. For illustrations, the Frames variants are recommended.
The image will automatically scale to fit the card's dimensions. If needed, you can adjust the image's crop or positioning in the Fill section of Figma's right-hand sidebar.
If you don't need an image, you can hide the Image slot in Figma by pressing Backspace or clicking the eye icon in the right-hand sidebar. The card will automatically adjust its layout when the image is hidden. Cards without an image can be used for service cards with a larger logo or for simple text cards without any visual elements.
Title: Left slot
The title of the article card has a Left slot, and it contains an icon or a logo. Use one of them at a time for additional information, e.g. a logo for a service card.
Logo size: To get the correct size on a logo, select the logo layer (inside Slot item left) and use Swap instance in the right-hand sidebar to swap it with another logo from the library.
Title: Right slot
The title of the article card has a Right slot, and it contains an icon or a badge. Use one of them at a time for additional information, e.g. a badge as a status indicator.
Content
The Content slot includes a text field where you can add your own text or use the slot to add elements such as badges or buttons. If you add more than one element, place them in an Auto Layout frame with a horizontal direction. Use either badge or button, but not both at the same time.
Resource
The article card component is available in Components in Figma. You can use it as a reference for your designs or to implement it in code. The component is available in both vertical and horizontal orientations, with properties such as padding and slots.