Components

Content item

Renders a customizable content item from the content collection. Suitable for posts, news, portfolio items, and other dynamic content.

Component

View code

Show playground

Post content title

Post content description

Props

Props	Default	Type
`type`	`ContentItemType.CARD`	`ContentItemType`
`title`	`'Title'`	`string`
`titleTag`	`'h4'`	`string`
`titleClass`	`'font-semibold'`	`string`
`titleMaxLength`	`72`	`number`
`description`	—	`string`
`descriptionClass`	`'text-sm text-text-neutral-subtle'`	`string`
`descriptionMaxLength`	`100`	`number`
`to`	—	`string`
`hasImage`	`true`	`boolean`
`imgUrl`	—	`string`
`imgAlt`	`'Item image'`	`string`
`imgAspectRatio`	`AspectRatio.AR_16_9`	`AspectRatio`
`imgHoverEffect`	`ImageHoverEffect.BLUR`	`ImageHoverEffect`
`hasImageHoverIcon`	`true`	`boolean`
`imgHoverIcon`	—	`string`
`imgHoverIconClass`	—	`string`
`imgFallbackIcon`	—	`string`
`imgFallbackIconClass`	—	`string`
`imgContainerClass`	—	`string`
`containerClass`	—	`string`
`hasCardShadow`	`true`	`boolean`
`hasCardBackgroundHover`	`false`	`boolean`

Usage

type

The type prop determines the type of the content item. It accepts values from the ContentItemType enum.

 <template>
    <ContentItem 
        :type="ContentItemType.CARD"  
    />
</template>

Type: ContentItemType
Default: ContentItemType.CARD

Options

Value	Description
`BASIC`	Displays the item with in a basic style
`CARD`	Displays the item inside a card

title

Sets the title of the content item.

 <template>
    <ContentItem 
        title="Title"  
    />
</template>

Type: string
Default: 'Title'

titleTag

Sets the HTML tag used for the title.

Accepted tags: h3, h4, h5, h6

 <template>
    <ContentItem 
        title="Title" 
        titleTag="h4"  
    />
</template>

Type: string
Default: 'h4'

titleClass

Sets the class of the title.

 <template>
    <ContentItem 
        title="Title" 
        titleClass="font-bold"  
    />
</template>

Type: string
Default: 'font-semibold'

titleMaxLength

Sets the maximum length of the title.

 <template>
    <ContentItem 
        title="Title" 
        titleMaxLength="10"  
    />
</template>

Type: number
Default: 72

description

Sets the description of the content item.

 <template>
    <ContentItem 
        description="Description"  
    />
</template>

Type: string
Default: ''

descriptionClass

Sets the class of the description.

 <template>
    <ContentItem 
        description="Description" 
        descriptionClass="text-sm"  
    />
</template>

Type: string
Default: 'text-sm text-text-neutral-subtle'

descriptionMaxLength

Sets the maximum length of the description.

 <template>
    <ContentItem 
        description="Description" 
        descriptionClass="text-sm" 
        descriptionMaxLength="10"  
    />
</template>

Type: number
Default: 100

to

Sets the link of the content item.

 <template>
    <ContentItem 
        to="/"
    />
</template>

Type: string

hasImage

Sets whether the content item should display an image. If it it set to true but no image is provided, it will show the fallback placeholder.

 <template>
    <ContentItem 
        hasImage="true"
    />
</template>

imgUrl

Sets the URL of the image to be displayed.

 <template>
    <ContentItem 
        imgUrl="https://picsum.photos/200/300"
    />
</template>

Type: string

imgAlt

Sets the alt text of the image.

 <template>
    <ContentItem 
        imgUrl="https://picsum.photos/200/300" 
        imgAlt="Item image"  
    />
</template>

Type: string
Default: 'Item image'

imgAspectRatio

Sets the aspect ratio of the image.

 <template>
    <ContentItem 
        imgAspectRatio="AspectRatio.AR_16_9"  
    />
</template>

Type: AspectRatio
Default: AspectRatio.AR_16_9

Options

Value	Description
`AR_1_1`	Square image format
`AR_4_3`	Horizontal 4:3 aspect ratio
`AR_3_2`	Horizontal 3:2 aspect ratio
`AR_16_9`	Horizontal 16:9 aspect ratio
`AR_3_4`	Vertical 3:4 aspect ratio
`AR_4_5`	Vertical 4:5 aspect ratio
`AR_2_3`	Vertical 2:3 aspect ratio

imgHoverEffect

Sets the hover effect of the image.

 <template>
    <ContentItem 
        :imgHoverEffect="ImageHoverEffect.ZOOM_IN"  
    />
</template>

Type: ImageHoverEffect
Default: ImageHoverEffect.BLUR

Options

Value	Description
`ZOOM_IN`	Zoom in on the image
`ZOOM_OUT`	Zoom out of the image
`OVERLAY`	Overlay the image
`BLUR`	Blur the image

hasImageHoverIcon

Sets whether the image should display a hover icon.

 <template>
    <ContentItem 
        :hasImageHoverIcon="true"  
    />
</template>

Type: boolean
Default: true

imgHoverIcon

Sets the icon to be displayed on hover.

 <template>
    <ContentItem 
        imgHoverIcon="mdi:eye-outline"  
    />
</template>

Type: string

imgHoverIconClass

Sets the class of the hover icon.

 <template>
    <ContentItem 
        imgHoverIcon="mdi:eye-outline"  
        imgHoverIconClass="text-icon-neutral-on-filled-bg"
    />
</template>

Type: string

imgFallbackIcon

Sets the fallback icon when no image is found.

 <template>
    <ContentItem 
        imgFallbackIcon="mdi:image-off-outline"  
    />
</template>

Type: string

imgFallbackIconClass

Sets the class of the fallback icon.

 <template>
    <ContentItem 
        imgFallbackIcon="mdi:image-off-outline"  
        imgFallbackIconClass="text-icon-primary-brand-default"
    />
</template>

Type: string

imgContainerClass

Sets the class of the image container.

 <template>
    <ContentItem 
        imgContainerClass="rounded-lg"  
    />
</template>

Type: string

containerClass

Sets the class of the container.

 <template>
    <ContentItem 
        containerClass="bg-white"  
    />
</template>

Type: string

hasCardShadow

Sets whether the card has a shadow. It requires the type to be ContentItemType.CARD.

 <template>
    <ContentItem 
        :type="ContentItemType.CARD"
        :hasCardShadow="false"
    />
</template>

Type: boolean
Default: true

hasCardBackgroundHover

Sets whether the card background has a hover effect. It requires the type to be ContentItemType.CARD.

 <template>
    <ContentItem 
        :type="ContentItemType.CARD"
        :hasCardBackgroundHover="true"
    />
</template>

Type: boolean
Default: false

Slots

Name	Description
`content`	Template to render a custom content for the item

 <template>
    <ContentItem>
        <template #content>
            <!-- Insert custom content here -->
        </template>
    </ContentItem>
</template>