Skip to content

Latest commit

 

History

History
70 lines (57 loc) · 2.08 KB

README.md

File metadata and controls

70 lines (57 loc) · 2.08 KB
Raw

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>