Component Request - Flexible/CardWithImage FTVA variation

## Component Description

This component displays Associated Topics that are displayed as CardWithImages / SectionTeaserCard for different content types with FTVA theme.

## Tickets

- [x] [APPS-3235 Create new ScrollWrapper component](https://uclalibrary.atlassian.net/browse/APPS-3235)
- [ ] [APPS-3236 Component: Add FTVA variation to Flexible Card With Image](https://uclalibrary.atlassian.net/jira/software/c/projects/APPS/boards/12?selectedIssue=APPS-3236)

## Screenshots
https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=15341-607&p=f&t=fADIEqvbgcj2mloa-0
<img width="886" alt="Image" src="https://github.com/user-attachments/assets/24966cda-376e-4549-9d78-74cbdadd9f7d" />

---

## Developer Tips

1. The scrolling wrapper component is already enabled in FlexibleBlocks if it is ftva theme and the flexibleblock is of type CardWithImage

2. If theme is ftva, we will repurpose styles from sectionTeaserCard in this component

3. Add computed methods to parse the data for event, series, article and general content page entry types.

### Card Content Variations
- **Up to 6 entries - This is limited in Craft**
 - This is in the GQL so we can't display all the entries in one block of CardWithImage
- The sort order will be decided by the content editor (Jen Rhee) in Craft. Craft respects crafts order of each of the cards in the query.

[Test Craft About page](https://test-craft.library.ucla.edu/admin/entries/ftvaGeneralContentPage/3110025-about)

1. ftvaEvent
2. ftvaEventSeries
3. ftvaArticle
4. ftvaGeneralContentPage
5. generalContentPage
6. article
7. externalContent

#### INTERNAL Content ENTRIES Craft Data fields

Because the Internal content can be picked from any site like main library site or Meap or other future site, we need to have consistent work on the URI for these Cards. 

Also these cards are used on Main Library website and Meap so we need a consistent and reliable way to setup uri for these cards. 

Needs further discussion with the Team , 
Can we add field in Craft which makes it clear what the URI should be? 
We can also check for theme , 
 + if theme is ftva, 
 + we structure the URI in certain way
 + if no theme
 + assume it is Main library website and URI of the cards should continue to work.

URI field for different content types may look like below if theme is `ftva`

1. If typeHandle or sectionHandle is `ftvaEvent`, the link for this card will be internal to ftva, hence we only need to use the util `fixURI(uri)` to get the URI to look like from `events/4-givings-09-07-24` to `/events/4-givings-09-07-24`.
2. If typeHandle or sectionHandle is `ftvaEventSeries`, the link for this card will be internal to ftva, hence we only need to use the util `fixURI(uri)` to get the URI to look like from `series/films-of-ericka-beckman` to `/series/films-of-ericka-beckman`.
3. If typeHandle or sectionHandle is `ftvaArticle`, the link for this card will be internal to ftva, hence we only need to use the util `fixURI(uri)` to get the URI to look like from `blog/test-hot-air-balloons` to `/blog/test-hot-air-balloons`.
4. If typeHandle or sectionHandle `ftvaGeneralContentPage`, the link for this card will be internal to ftva, hence we only need to replace ftva with an empty string to get the URI to look like from `ftva/about` to `/about`. 
5. If sectionHandle or typeHandle is `generalContentPage` that means there is no prefix like `ftva` than it is not ftva content type but main library website content type, hence the URI will need to be from `about/jobs` to `https://www.library.ucla.edu/about/jobs`


#### 1. EVENT - FTVA
typeHandle: internalContent
sectionHandle: ftvaEvent
- internal link
- image
- title
- event date (format OCTOBER 10, 2025)

Actual fields used for this entry

| link | image | title | date |
|---|---|---|---|
| uri | ftvaImage/imageCarousel | eventTitle | startDateWithTime |
| | imageCarousel | | OCTOBER 14, 2025 |

<details><summary>GQL for the story</summary>

```
{
 id: "3827352",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3512384",
 typeHandle: "ftvaEvent",
 sectionHandle: "ftvaEvent",
 contentType: "ftvaEvent",
 uri: "events/4-givings-09-07-24",
 slug: "4-givings-09-07-24",
 ftvaImage: [
 {
 id: "3512388",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Screenshot-2024-12-13-at-8.00.38-AM.png",
 height: 1663,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 imageCarousel: [
 {
 image: [
 {
 id: "3807065",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/PXL_20250309_163035600.jpg",
 height: 1440,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "4 Givings 09-07-24",
 eventTitle: "4 Givings",
 startDateWithTime: "2024-09-07T19:30",
 endDateWithTime: "2024-12-17T21:30",
 postDate: "2024-12-17T12:31"
 }
```

</details>

#### 2. SERIES - FTVA
typeHandle: internalContent
sectionHandle: ftvaEventSeries
- internal link
- uri
- title or titleGeneral
- date range or ongoing

Actual fields used for this entry

| link | image | title | date |
|---|---|---|---|
| uri | ftvaImage | title | startDate |
| | imageCarousel | | endDate |
| | | | ongoing |
| | | | Mar 1, 2025 - Mar 30, 2025 |
| | | | ONGOING |

<details><summary>GQL for the story</summary>

```
 {
 id: "3803131",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3512397",
 typeHandle: "eventSeries",
 sectionHandle: "ftvaEventSeries",
 contentType: "ftvaEventSeries",
 uri: "series/films-of-ericka-beckman",
 slug: "films-of-ericka-beckman",
 ftvaImage: [
 {
 id: "3512401",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg",
 height: 1748,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 imageCarousel: [
 {
 image: [
 {
 id: "3512399",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg",
 height: 1748,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Films of Ericka beckman",
 startDate: "2024-08-03T00:00",
 endDate: "2024-08-24T00:00",
 postDate: "2024-12-17T12:36",
 ongoing: false
 }
 ]
 },
```

</details>

#### 3. ARTICLE - FTVA
typeHandle: internalContent
sectionHandle: ftvaArticle
- internal link
- title
- postDate (date published)

Actual fields used for this entry

| link | image | title | date |
|---|---|---|---|
| uri | ftvaImage | title | postDate |
| | imageCarousel | formattedTitle | OCTOBER 14, 2025 |

<details><summary>GQL for the story</summary>

```
 {
 id: "3803132",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3266907",
 typeHandle: "ftvaArticle",
 sectionHandle: "ftvaArticle",
 contentType: "ftvaArticle",
 uri: "blog/test-hot-air-balloons",
 slug: "test-hot-air-balloons",
 ftvaImage: [
 {
 id: "3280520",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/hot_air_balloon.jpg",
 height: 1280,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/hot_air_balloon.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/hot_air_balloon.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/hot_air_balloon.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/hot_air_balloon.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/hot_air_balloon.jpg 2560w",
 alt: "Hot air balloon",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 imageCarousel: [
 {
 image: [
 {
 id: "3267149",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/balloons-1.jpg",
 height: 1347,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/balloons-1.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/balloons-1.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/balloons-1.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/balloons-1.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/balloons-1.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 },
 {
 image: [
 {
 id: "3267372",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/ballon-heating.jpg",
 height: 1921,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/ballon-heating.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/ballon-heating.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/ballon-heating.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/ballon-heating.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/ballon-heating.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 },
 {
 image: [
 {
 id: "3280534",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/kpil7j-21cut1large.webp",
 height: 1664,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 2560w",
 alt: "many hot air balloons in the air",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 },
 {
 image: [
 {
 id: "3280543",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/temecula_balloons.jpg",
 height: 1595,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/temecula_balloons.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/temecula_balloons.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/temecula_balloons.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/temecula_balloons.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/temecula_balloons.jpg 2560w",
 alt: "Temecula balloons",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "TEST - Hot Air Balloons",
 formattedTitle: null,
 postDate: "2024-09-20T10:50"
 }
 ]
 },
```

</details>

#### 4. GENERAL CONTENT - FTVA
typeHandle: internalContent
sectionHandle: ftvaGeneralContentPage
- internal link
- image
- title

Actual fields used for this entry

| link | image | title | date |
|---|---|---|---|
| slug | ftvaImage | title | no date |
| | imageCarousel | formattedTitle | |



<details><summary>GQL for the story</summary>

```
 {
 id: "3827150",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3701678",
 typeHandle: "generalContentPage",
 sectionHandle: "ftvaGeneralContentPage",
 contentType: "ftvaGeneralContentPage",
 uri: "ftva/daffodil-days",
 ftvaImage: [],
 imageCarousel: [
 {
 image: [
 {
 id: "3701680",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/PXL_20240323_163248504.jpg",
 height: 1920,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 2560w",
 alt: "Image alt text here",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Daffodil Days",
 formattedTitle: "Daffodil Days Formatted Title",
 postDate: "2025-02-05T16:18"
 }
 ]
 },
```

</details>

#### 5. ARTICLE - LIBRARY
typeHandle: externalContent
sectionHandle: article
- external link
- image
- title
- postDate (date published) 
[library article](https://www.library.ucla.edu/about/news/2024-davise-fund-recipients/)

Actual fields used for this entry

| link | image | title | date |
|---|---|---|---|
| uri | heroImage | title | postDate |
| | | | OCTOBER 14, 2025 |


<details><summary>GQL for the story</summary>

```
 {
 id: "3807262",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "2930588",
 typeHandle: "article",
 sectionHandle: "article",
 contentType: "article",
 uri: "about/news/test-article-squirrel-guinea-pig-garden-in-japan",
 slug: "test-article-squirrel-guinea-pig-garden-in-japan",
 heroImage: [
 {
 image: [
 {
 id: "2930586",
 src: "https://static.library.ucla.edu/craftassetstest/images/_fullscreen/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg",
 height: 1953,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Test - Article - Squirrel & Guinea Pig Garden in Japan",
 postDate: "2024-03-22T15:21"
 }
 ]
 },
```

</details>

#### 6. GENERAL CONTENT - LIBRARY 

typeHandle: internalContent
sectionHandle: generalContentPage
- external link
- image
- title

| link | image | title | date |
|---|---|---|---|
| to: externalLink | image | title | no date |
| (externalLink) | | | |

<details><summary>GQL for the story</summary>

```
 {
 id: "3823257",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "64717",
 typeHandle: "generalContentPage",
 sectionHandle: "generalContentPage",
 contentType: "generalContentPage",
 uri: "about/jobs",
 heroImage: [
 {
 image: [
 {
 id: "64755",
 src: "https://static.library.ucla.edu/craftassetstest/images/_fullscreen/screens_feature3-1.jpg",
 height: 1443,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/screens_feature3-1.jpg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/screens_feature3-1.jpg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/screens_feature3-1.jpg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/screens_feature3-1.jpg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/screens_feature3-1.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Jobs",
 postDate: "2022-11-30T13:48"
 }
 ]
 }
```

</details>

#### 7. EXTERNAL ENTRIES
typeHandle: externalContent
- external link
- image
- title

Actual fields used for this entry

| link | image | title | date |
|---|---|---|---|
| to | image | title | no date |
| (externalLink) | | (titleGeneral) | |

<details><summary>GQL for the story</summary>

```
 cardWithImage: [
 {
 id: "3754187",
 typeHandle: "externalContent",
 titleGeneral: "Peacocks",
 image: [
 {
 id: "3754131",
 src: "https://static.library.ucla.edu/craftassetstest/images/_fullscreen/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg",
 height: 4551,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 to: "https://www.birdnote.org/podcasts/birdnote-daily/peacocks-tail-more-meets-eye"
 },
]
```

</details>

---

## Child components

No Child component

---

## GQL - FULL Fragment Query

<details><summary>GQL for the INTERNAL & EXTERNAL BlockCardWithImage components - All 7 types</summary>

```
{
 data: {
 entry: {
 id: "3110025",
 uri: "ftva/about",
 title: "About the Archive",
 formattedTitle: null,
 ftvaHomepageDescription: "The National Archives is the United States' collection of historical <a href=\"https://www.archives.gov/about/info/whats-an-archives.html#:~:text=An%20archives%20is%20a%20place,important%20events%20in%20American%20history.\" target=\"_blank\" rel=\"noreferrer noopener\">events</a> AssociatedTopicCards, CallToAction, ContactInfo, Form, HorizontalDivider, InfoBlock, ImpactNumberCards, MediaGallery, MediaWithText, PullQuote, RichText, SimpleCards,
 blocks: [

 {
 id: "3699997",
 typeHandle: "cardWithImage",
 sectionTitle: "Card with Image / Associated Topics - INTERNAL CONTENT National Archives of Finland",
 sectionSummary: "Archives official documents of the Finnish state and municipalities. It consists of three locations in the capital <a href=\"https://en.wikipedia.org/wiki/Helsinki\" title=\"Helsinki\">Helsinki</a> and seven former regional archives. ,
 cardWithImage: [
 {
 id: "3803130",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3512384",
 typeHandle: "ftvaEvent",
 sectionHandle: "ftvaEvent",
 contentType: "ftvaEvent",
 uri: "events/4-givings-09-07-24",
 slug: "4-givings-09-07-24",
 ftvaImage: [
 {
 id: "3512388",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Screenshot-2024-12-13-at-8.00.38-AM.png",
 height: 1663,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Screenshot-2024-12-13-at-8.00.38-AM.png 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 imageCarousel: [
 {
 image: [
 {
 id: "3807065",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/PXL_20250309_163035600.jpg",
 height: 1440,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/PXL_20250309_163035600.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "4 Givings 09-07-24",
 eventTitle: "4 Givings",
 startDateWithTime: "2024-09-07T19:30",
 endDateWithTime: "2024-12-17T21:30",
 postDate: "2024-12-17T12:31"
 }
 ]
 },
 {
 id: "3803131",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3512397",
 typeHandle: "eventSeries",
 sectionHandle: "ftvaEventSeries",
 contentType: "ftvaEventSeries",
 uri: "series/films-of-ericka-beckman",
 slug: "films-of-ericka-beckman",
 ftvaImage: [
 {
 id: "3512401",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg",
 height: 1748,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists_2024-12-17-203818_myzi.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 imageCarousel: [
 {
 image: [
 {
 id: "3512399",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg",
 height: 1748,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/Ericka-Beckman-Hiatus-1999.-Image-courtesy-the-artists.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Films of Ericka beckman",
 startDate: "2024-08-03T00:00",
 endDate: "2024-08-24T00:00",
 postDate: "2024-12-17T12:36",
 ongoing: false
 }
 ]
 },
 {
 id: "3803132",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3266907",
 typeHandle: "ftvaArticle",
 sectionHandle: "ftvaArticle",
 contentType: "ftvaArticle",
 uri: "blog/test-hot-air-balloons",
 slug: "test-hot-air-balloons",
 ftvaImage: [
 {
 id: "3280520",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/hot_air_balloon.jpg",
 height: 1280,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/hot_air_balloon.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/hot_air_balloon.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/hot_air_balloon.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/hot_air_balloon.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/hot_air_balloon.jpg 2560w",
 alt: "Hot air balloon",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 imageCarousel: [
 {
 image: [
 {
 id: "3267149",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/balloons-1.jpg",
 height: 1347,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/balloons-1.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/balloons-1.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/balloons-1.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/balloons-1.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/balloons-1.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 },
 {
 image: [
 {
 id: "3267372",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/ballon-heating.jpg",
 height: 1921,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/ballon-heating.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/ballon-heating.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/ballon-heating.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/ballon-heating.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/ballon-heating.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 },
 {
 image: [
 {
 id: "3280534",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/kpil7j-21cut1large.webp",
 height: 1664,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 2560w",
 alt: "many hot air balloons in the air",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 },
 {
 image: [
 {
 id: "3280543",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/temecula_balloons.jpg",
 height: 1595,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/temecula_balloons.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/temecula_balloons.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/temecula_balloons.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/temecula_balloons.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/temecula_balloons.jpg 2560w",
 alt: "Temecula balloons",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "TEST - Hot Air Balloons",
 formattedTitle: null,
 postDate: "2024-09-20T10:50"
 }
 ]
 },
 {
 id: "3827150",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "3701678",
 typeHandle: "generalContentPage",
 sectionHandle: "ftvaGeneralContentPage",
 contentType: "ftvaGeneralContentPage",
 uri: "ftva/daffodil-days",
 slug: "daffodil-days",
 ftvaImage: [],
 imageCarousel: [
 {
 image: [
 {
 id: "3701680",
 src: "https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/PXL_20240323_163248504.jpg",
 height: 1920,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 2560w",
 alt: "Image alt text here",
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Daffodil Days",
 formattedTitle: "Daffodil Days Formatted Title",
 postDate: "2025-02-05T16:18"
 }
 ]
 },
 {
 id: "3807262",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "2930588",
 typeHandle: "article",
 sectionHandle: "article",
 contentType: "article",
 uri: "about/news/test-article-squirrel-guinea-pig-garden-in-japan",
 slug: "test-article-squirrel-guinea-pig-garden-in-japan",
 heroImage: [
 {
 image: [
 {
 id: "2930586",
 src: "https://static.library.ucla.edu/craftassetstest/images/_fullscreen/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg",
 height: 1953,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/guinea-pi-squirrel_2024-03-22-221716_nvfk.jpeg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Test - Article - Squirrel & Guinea Pig Garden in Japan",
 postDate: "2024-03-22T15:21"
 }
 ]
 },
 {
 id: "3823257",
 typeHandle: "internalContent",
 contentLink: [
 {
 id: "64717",
 typeHandle: "generalContentPage",
 sectionHandle: "generalContentPage",
 contentType: "generalContentPage",
 uri: "about/jobs",
 slug: "jobs",
 heroImage: [
 {
 image: [
 {
 id: "64755",
 src: "https://static.library.ucla.edu/craftassetstest/images/_fullscreen/screens_feature3-1.jpg",
 height: 1443,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/screens_feature3-1.jpg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/screens_feature3-1.jpg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/screens_feature3-1.jpg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/screens_feature3-1.jpg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/screens_feature3-1.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ]
 }
 ],
 title: "Jobs",
 postDate: "2022-11-30T13:48"
 }
 ]
 }
 ]
 },
 {
 id: "3754183",
 typeHandle: "cardWithImage",
 sectionTitle: "Card with Image / Associated Topics - EXTERNAL CONTENT",
 sectionSummary: null,
 cardWithImage: [
 {
 id: "3754187",
 typeHandle: "externalContent",
 titleGeneral: "Peacocks",
 image: [
 {
 id: "3754131",
 src: "https://static.library.ucla.edu/craftassetstest/images/_fullscreen/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg",
 height: 4551,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/PXL_20250224_234728720_2025-02-28-191656_idqw.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 to: "https://www.birdnote.org/podcasts/birdnote-daily/peacocks-tail-more-meets-eye"
 },
 {
 id: "3826943",
 typeHandle: "externalContent",
 titleGeneral: "Helsinki",
 image: [
 {
 id: "3807469",
 src: "https://static.library.ucla.edu/craftassetstest/images/_fullscreen/Helsinki.jpg",
 height: 2306,
 width: 2560,
 srcset: "https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/Helsinki.jpg 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/Helsinki.jpg 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/Helsinki.jpg 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/Helsinki.jpg 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/Helsinki.jpg 2560w",
 alt: null,
 focalPoint: [
 0.5,
 0.5
 ]
 }
 ],
 to: "https://en.wikipedia.org/wiki/Helsinki"
 }
 ]
 },
 ]
 }
 }
}
```

</details>

---

## Design

- Title Truncation
 - if date=true @include truncate(3) 
 - else @include truncate(4) 
dark.svg}(assets/svgs/icon-ftva-external-link-dark.svg)
- Date
 - if single date spell out the month
 - if date range truncate month to 3 letters
- The cards will be blue and the background will be white.
- The External Link has the icon [icon-ftva-external-link--dark.svg](https://github.com/UCLALibrary/design-tokens/blob/main/assets/svgs/icon-ftva-external-link-dark.svg)

#### Styles from SectionTeaserCard

<details><summary>**`vue-component-library/src/styles/ftva/_section-teaser-card.scss`**</summary>

```
.ftva.section-teaser-card {
 flex-wrap: nowrap;
 max-width: 100%; // 100% of the parent container
 align-items: flex-start;
 overflow-y: auto;
 padding-top: 25px;
 gap: var(--space-xl) 20px;
 scrollbar-color: $grey-blue $white;
 &:has(> :last-child:nth-child(3)) {
 /* if section has 3 elements */
 justify-content: space-between;
 gap: var(--space-xl) 16px;
 }

 .card {
 flex-basis: calc((100% / 3) - 22px);
 min-width: 280px;
 margin-bottom: 15px;
 min-height: 350px;

 :deep(.ftvaItemInCollection) {
 min-height: 60px;
 }
 }
}

.ftva.section-teaser-card-title {
 @include ftva-card-title-1;
 padding-top: 60px;
 color: $accent-blue;
}
```

</details>

---

## Acceptance Criteria:

- [ ] This component should work as it is for the main library website.

### FTVA theme

- [ ] This component will arrange the BlockCardWithImage items in a horizontal layout like SectionTeaserCard for FTVA.

- [ ] Copy the FTVA styles from SectionTeaserCard SCSS files to this component in its own SCSS files for this component.

- [ ] The metadata fields under the image for the individual cards will be specific to sectionHandle, document what will be shown in what order for different content types.

- [ ] Internal content has 6 types, External content is another making 7 different types

- [ ] Document how new scrolling wrapping component will be used in this component

[APPS-3236]: https://uclalibrary.atlassian.net/browse/APPS-3236?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

[APPS-3235]: https://uclalibrary.atlassian.net/browse/APPS-3235?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Component Request - Flexible/CardWithImage FTVA variation #714

Component Description

Tickets

Screenshots

Developer Tips

Card Content Variations

INTERNAL Content ENTRIES Craft Data fields

1. EVENT - FTVA

2. SERIES - FTVA

3. ARTICLE - FTVA

4. GENERAL CONTENT - FTVA

5. ARTICLE - LIBRARY

6. GENERAL CONTENT - LIBRARY

7. EXTERNAL ENTRIES

Child components

GQL - FULL Fragment Query

Design

Styles from SectionTeaserCard

Acceptance Criteria:

FTVA theme

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

link	image	title	date
uri	ftvaImage/imageCarousel	eventTitle	startDateWithTime
	imageCarousel		OCTOBER 14, 2025

link	image	title	date
uri	ftvaImage	title	startDate
	imageCarousel		endDate
			ongoing
			Mar 1, 2025 - Mar 30, 2025
			ONGOING

link	image	title	date
uri	ftvaImage	title	postDate
	imageCarousel	formattedTitle	OCTOBER 14, 2025

Component Request - Flexible/CardWithImage FTVA variation #714

Description

Component Description

Tickets

Screenshots

Developer Tips

Card Content Variations

INTERNAL Content ENTRIES Craft Data fields

1. EVENT - FTVA

2. SERIES - FTVA

3. ARTICLE - FTVA

4. GENERAL CONTENT - FTVA

5. ARTICLE - LIBRARY

6. GENERAL CONTENT - LIBRARY

7. EXTERNAL ENTRIES

Child components

GQL - FULL Fragment Query

Design

Styles from SectionTeaserCard

Acceptance Criteria:

FTVA theme

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions