ebay-section-title

EbaySectionTitle

Install

yarn add @ebay/ui-core-react

Usage

Import JS

import {
    EbaySectionTitle,
    EbaySectionTitleTitle as Title,
    EbaySectionTitleSubtitle as Subtitle
} from '@ebay/ui-core-react/ebay-section-title'

Import styles from Skin

import '@ebay/skin/section-title'

or if using CSS/SCSS

import '@ebay/skin/section-title.css'

<EbaySectionTitle>Today's Deals – All With Free Shipping</EbaySectionTitle>

<EbaySectionTitle href="https://www.ebay.com" ctaText="See All">
    <Title>Today's Deals – All With Free Shipping</Title>
    <Subtitle>Plus, guaranteed best prices.</Subtitle>
</EbaySectionTitle>

EbaySectionTitle Props

Name	Type	Stateful	Required	Description
ctaText	string	No	No	URL text. Optional content to be displayed next to title. href is required when using this attribute.
href	string	No	No	URL. Title content and optional CTA content will link to this. Populating cta-text is optional.

Nested Components

Name	Required	Description
title	No	The main title content to be displayed. Title tag is required when using other sub-tags.
subtitle	No	The subtitle content to be displayed
info	No	Placeholder for <EbayInfotip> component
overflow	No	Placeholder for <EbayMenuButton> component

Examples

import { EbaySectionTitleInfo as Info } from '@ebay/ui-core-react/ebay-section-title'
import { EbayInfotip, EbayInfotipHeading, EbayInfotipContent } from '@ebay/ui-core-react/ebay-infotip'

<Info>
    <EbayInfotip
        a11yCloseText="Dismiss infotip"
        aria-label="Important information"
        pointer="top-left"
        icon="information"
    >
        <EbayInfotipHeading>Important</EbayInfotipHeading>
        <EbayInfotipContent><p>This is some important info</p></EbayInfotipContent>
    </EbayInfotip>
</Info>