From 1a1d695a24fa4c20426e216a69cdfa7332e0a7da Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Tue, 26 Sep 2023 13:46:29 -0700 Subject: [PATCH 1/2] chore(pages): remove & hide --- .../images/card_section_carousel.svg | 14 - src/data/components.json | 356 ------------------ src/data/nav-items.yaml | 58 +-- .../components/card-section-carousel.mdx | 104 ----- src/pages/components/card-section.mdx | 87 ----- src/pages/components/content-block-cards.mdx | 65 ---- .../components/content-block-horizontal.mdx | 49 --- src/pages/components/content-block-media.mdx | 57 --- .../components/content-block-segmented.mdx | 62 --- src/pages/components/content-block-simple.mdx | 57 --- src/pages/components/content-block.mdx | 152 -------- src/pages/components/content-group-cards.mdx | 39 -- .../components/content-group-pictograms.mdx | 39 -- src/pages/components/content-group-simple.mdx | 47 --- src/pages/components/layout.mdx | 27 -- src/pages/components/link-list-section.mdx | 85 ----- src/pages/components/pictogram-item.mdx | 44 --- src/pages/resources/index.mdx | 295 --------------- wiki/Layout-component/Content-block-cards.md | 48 --- .../Content-block-horizontal.md | 84 ----- wiki/Layout-component/Content-block-media.md | 49 --- .../Content-block-mixed-groups.md | 51 --- .../Content-block-segmented.md | 55 --- wiki/Layout-component/Content-block-simple.md | 51 --- wiki/Layout-component/Content-block.md | 156 -------- 25 files changed, 13 insertions(+), 2118 deletions(-) delete mode 100644 src/components/ComponentGallery/images/card_section_carousel.svg delete mode 100644 src/pages/components/card-section-carousel.mdx delete mode 100644 src/pages/components/card-section.mdx delete mode 100644 src/pages/components/content-block-cards.mdx delete mode 100644 src/pages/components/content-block-horizontal.mdx delete mode 100644 src/pages/components/content-block-media.mdx delete mode 100644 src/pages/components/content-block-segmented.mdx delete mode 100644 src/pages/components/content-block-simple.mdx delete mode 100644 src/pages/components/content-block.mdx delete mode 100644 src/pages/components/content-group-cards.mdx delete mode 100644 src/pages/components/content-group-pictograms.mdx delete mode 100644 src/pages/components/content-group-simple.mdx delete mode 100644 src/pages/components/layout.mdx delete mode 100644 src/pages/components/link-list-section.mdx delete mode 100644 src/pages/components/pictogram-item.mdx delete mode 100644 src/pages/resources/index.mdx delete mode 100644 wiki/Layout-component/Content-block-cards.md delete mode 100644 wiki/Layout-component/Content-block-horizontal.md delete mode 100644 wiki/Layout-component/Content-block-media.md delete mode 100644 wiki/Layout-component/Content-block-mixed-groups.md delete mode 100644 wiki/Layout-component/Content-block-segmented.md delete mode 100644 wiki/Layout-component/Content-block-simple.md delete mode 100644 wiki/Layout-component/Content-block.md diff --git a/src/components/ComponentGallery/images/card_section_carousel.svg b/src/components/ComponentGallery/images/card_section_carousel.svg deleted file mode 100644 index 4e24282df..000000000 --- a/src/components/ComponentGallery/images/card_section_carousel.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - card-section-carousel - - - - - - - - - - - \ No newline at end of file diff --git a/src/data/components.json b/src/data/components.json index ef0f1d876..ebdcb8e4e 100644 --- a/src/data/components.json +++ b/src/data/components.json @@ -853,60 +853,6 @@ "notAvailable": false } }, - "Card section": { - "url": "/components/card-section", - "designLink": "https://ibm.box.com/s/6prfrgt7dftdg47ejy3q3m4x7h47kbmo", - "description": "Card section is a collection of cards presented in a full-width section with a left-column header that responds to the grid.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-card-section-simple--default", - "react": "https://www.ibm.com/standards/carbon/react/?path=/story/components-card-section-simple--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Card section carousel": { - "url": "/components/card-section-carousel/", - "designLink": "https://ibm.box.com/s/wyj5uboppri7nc3gn4v1f7ft80qc5eir", - "description": "Card section carousel is an exploratory component, meaning it allows users to browse or explore multiple pieces of content within the same area of the page.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-card-section-carousel--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-card-section-carousel--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Card section images": { "url": "/components/card-section#card-section-images", "designLink": "https://ibm.box.com/s/u4acyo9oeqya8xidimxtidh8k8y08fza", @@ -934,172 +880,6 @@ "notAvailable": false } }, - "Content block": { - "url": "/components/content-block", - "designLink": "https://ibm.box.com/s/uaq0ovswviefwbv7gd4jn13llvqb23f8", - "description": "Content block is a high-level layout component that acts as the main content unit used inside of a Content section to build web experiences on IBM dotcom. It encapsulates other content components (one or multiple content groups) and brings them together into a custom visual, which solves a specific problem for the user.", - "storybook": { - "webcomponents": "https://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block--default", - "react": "https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-block--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content block cards": { - "url": "/components/content-block-cards", - "designLink": "https://ibm.box.com/s/9pweudf9ptucx8jxzgo3e2m5jpyke5qi", - "description": "Content block cards is used to present small self-contained pieces of information as cards.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block-cards--default", - "react": "http://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-cards--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content block horizontal": { - "url": "/components/content-block-horizontal", - "designLink": "https://ibm.box.com/s/rv5kmm0a4d9ded74v6yfk8ad5id5ghmx", - "description": "Content block horizontal is used to highlight a group of more important pieces of content, such as products or solutions, with more visual weight.", - "storybook": { - "webcomponents": "https://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block-horizontal--default", - "react": "https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-horizontal--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-block-horizontal--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content block media": { - "url": "/components/content-block-media", - "designLink": "https://ibm.box.com/s/9cu22l7vs1dpjy8g8yi3mtoswazqgq2r", - "description": "Content block media is used to present information with images in a group setting.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block-media--default", - "react": "http://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-media--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-block-media--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content block segmented": { - "url": "/components/content-block-segmented", - "designLink": "https://ibm.box.com/s/pkascpokk7ae4t3ixis98hmw4e5y1v56", - "description": "Content block segmented is a variation of Content block simple with the added ability to add subsections.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block-segmented--default", - "react": "http://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-segmented--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content block simple": { - "url": "/components/content-block-simple", - "designLink": "https://ibm.box.com/s/511cy3utuof76on064vfzmv8dej5nc8c", - "description": "Content block simple is typically used for the introductory section on a page.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block-simple--default", - "react": "http://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-simple--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-block-simple--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Content group": { "url": "/components/content-group", "designLink": "https://ibm.box.com/s/5n0sj6b3kkicnwimxmgnwb5owm46g8wz", @@ -1155,87 +935,6 @@ "notAvailable": false } }, - "Content group cards": { - "url": "/components/content-group-cards", - "designLink": "https://ibm.box.com/s/5sfef66ow9ruw47qye5snhnxey0ioi6t", - "description": "Content group cards is used to present information through a group of cards with each acting as a call to action that drives to additional or supporting destinations. It is suitable for adding concise buckets of content and links to a long-form reading experience.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-group-cards--default", - "react": "http://www.ibm.com/standards/carbon/react/?path=/story/components-content-group-cards--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content group pictograms": { - "url": "/components/content-group-pictograms", - "designLink": "https://ibm.box.com/s/af11r4k5fv1wclv1yrl9aic5c68x29ra", - "description": "Content group pictograms is used to present a group of information, each with a supporting pictogram.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-group-pictograms--default", - "react": "http://www.ibm.com/standards/carbon/react/?path=/story/components-content-group-pictograms--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content group simple": { - "url": "/components/content-group-simple", - "designLink": "https://ibm.box.com/s/bkqyb6nzix46vfsy8b0cyg79c3fs0lac", - "description": "Content group simple is an alternative form of a narrative layout where the content is broken up into smaller pieces to make it more digestible.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-group-simple--default", - "react": "http://www.ibm.com/standards/carbon/react/?path=/story/components-content-group-simple--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Content item": { "url": "/components/content-item", "designLink": "https://ibm.box.com/s/xfm17x7dwbe4z7kjk482b8hbpjasft7o", @@ -1401,33 +1100,6 @@ "notAvailable": false } }, - "Layout": { - "url": "/components/layout", - "designLink": false, - "description": "The layout component is to be utilized within IBM.com for various abstract layout configurations.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-layout--default", - "react": "https://www.ibm.com/standards/carbon/react/?path=/story/components-layout--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Lead space": { "url": "/components/leadspace", "designLink": "https://ibm.box.com/s/d9jey3rlfxqmxu059f0x9dtcx7f5ehuh", @@ -1539,34 +1211,6 @@ "notAvailable": false } }, - "Pictogram item": { - "url": "/components/pictogram-item", - "designLink": "https://ibm.box.com/s/kjio8inhxhkmf7245l2wccp8zsivka9l", - "description": "Pictogram item is used to communicate messages at a glance, afford interactivity, and simplify complex ideas.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-pictogram-item--default", - "react": "https://www.ibm.com/standards/carbon/react/?path=/story/components-pictogram-item--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-pictogram-item--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Table of contents": { "url": "/components/table-of-contents", "designLink": "https://ibm.box.com/s/yfuicifhfeaefp4rl0pp62dpeacr18ry", diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index b365ad900..5c3453e8a 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -30,20 +30,20 @@ path: /developing/building-for-ibm-dotcom - title: Carbon CDN style helpers path: /developing/carbon-cdn-style-helpers - - title: Web Components tutorial - path: /developing/web-components-tutorial/overview + # - title: Web Components tutorial + # path: /developing/web-components-tutorial/overview -- title: Contributing - pages: - - title: Overview - path: /contributing/overview - - title: Documentation - path: /contributions/documentation - - title: Components - path: /contributing/components - - title: Patterns - path: /contributing/patterns - hasDivider: true +# - title: Contributing +# pages: +# - title: Overview +# path: /contributing/overview +# - title: Documentation +# path: /contributions/documentation +# - title: Components +# path: /contributing/components +# - title: Patterns +# path: /contributing/patterns +# hasDivider: true - title: Guidelines pages: @@ -74,34 +74,12 @@ path: /components/cards - title: Card group path: /components/card-group - - title: Card section - path: /components/card-section - - title: Card section carousel - path: /components/card-section-carousel - title: Carousel path: /components/carousel - - title: Content block - path: /components/content-block - - title: Content block cards - path: /components/content-block-cards - - title: Content block horizontal - path: /components/content-block-horizontal - - title: Content block media - path: /components/content-block-media - - title: Content block segmented - path: /components/content-block-segmented - - title: Content block simple - path: /components/content-block-simple - title: Content group path: /components/content-group - title: Content group banner path: /components/content-group-banner - - title: Content group cards - path: /components/content-group-cards - - title: Content group pictograms - path: /components/content-group-pictograms - - title: Content group simple - path: /components/content-group-simple - title: Content item path: /components/content-item - title: Content item horizontal @@ -128,8 +106,6 @@ path: /components/images - title: Language selector path: /components/language-selector - - title: Layout - path: /components/layout - title: Lead space path: /components/leadspace - title: Lead space block @@ -142,8 +118,6 @@ path: /components/lightbox-media-viewer - title: Link list path: /components/link-list - - title: Link list section - path: /components/link-list-section - title: Link with icon path: /components/link-with-icon - title: Locale modal @@ -152,8 +126,6 @@ path: /components/logo-grid - title: Masthead path: /components/masthead - - title: Pictogram item - path: /components/pictogram-item - title: Quote path: /components/quote - title: Table of contents @@ -180,10 +152,6 @@ - title: Lead space path: /patterns/lead-space -- title: Resources - pages: - - path: /resources - - title: Help pages: - title: Overview diff --git a/src/pages/components/card-section-carousel.mdx b/src/pages/components/card-section-carousel.mdx deleted file mode 100644 index 960022cbd..000000000 --- a/src/pages/components/card-section-carousel.mdx +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Card section carousel -description: Card section carousel is a collection of cards presented within a carousel related to a given topic for users to explore. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Anatomy -Usage guidance -Content guidance -Feedback - - - - - -## Overview - -This layout component is commonly used when you have a large amount of similar content needed on a page, but you don’t want to increase the screen real estate. It includes a headline, cards, controls, an optional sub-copy, and an optional CTA text link. - -![Carousel image](../../images/component/card-section-carousel/carousel-intro.jpg) - -
- -## Anatomy - -![Carousel image](../../images/component/card-section-carousel/carousel-anatomy.jpg) - -1. **Headline**: Heading copy for the carousel component and is required. -2. **Subheading**: Additional sub copy usually used to elaborates on the main headline above it and is optional. -3. **CTA text link**: Call to action text link for directing the user to an action based off the content in the carousel and is optional. -4. **Cards**: The main content of the carousel lives in the cards. This card can be designed with any variations of the [Card](https://www.ibm.com/standards/carbon/components/card) component. -5. **Controls**: Icon buttons and pagination provide navigational controls for browsing through the carousel. These are required in the Carousel component, and you can learn more about the Carousel [here](https://www.ibm.com/standards/carbon/components/carousel). - -
- -## Usage guidance - -### When should I use the Card section carousel? - -- Use when you have multiple related content pieces but screen real estate is limited. -- Use when you have exploratory content that isn't necessary but helpful for the user. -- Use when you want to tease user with additional related content. - -### When should I not use the Card section carousel? - -- Do not use when content frames are not related. -- Do not use when users need to consume all carousel content because most users won't view every slide. - -### Content - -- The recommended amount of content is a minimum of 5 cards and maximum of 15 cards to avoid excessive clicking for the user. -- Make sure content in the carousel is related. -- Do not add essential content to a carousel. Essential content could include navigational or wayfinding content links. -- Prioritize the most important content at the beginning of the carousel. -- Carousel content should be simple and concise. -- Common content used in carousels includes use cases, news articles, client testimonials, and quotes. -- Make sure carousel content can be accessed outside the carousel in a menu, footer, and navigational page. - -
- - - - - -![Include 5 or fewer content frames in the carousel. ](../../images/component/card-section-carousel/carousel-do-not-1.jpg) - - - - - -
- -
- - - - - -![Never use essential content such as navigational links in the carousel.](../../images/component/card-section-carousel/carousel-do-not-2.jpg) - - - - - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| -------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | ------------------------------- | -| Content section | Component | Yes | 1 | – | | -| [Cards](hhttps://www.ibm.com/standards/carbon/components/cards/) | Component | Yes | Min 4 | – | Card types should not be mixed. | -| [Carousel](https://www.ibm.com/standards/carbon/components/carousel) | Component | Yes | 1 | – | | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content/#character-count-standards). - - diff --git a/src/pages/components/card-section.mdx b/src/pages/components/card-section.mdx deleted file mode 100644 index e3ca48ae3..000000000 --- a/src/pages/components/card-section.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Card section -description: - Card section is a collection of cards presented in a full-width section with a left-column header that responds to the - grid. When using a CTA (call-to-action) within a card, use an icon. The Primary and Secondary buttons should be - reserved for the most important action a user can take on the page. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import sketchSymbol from '../../images/icon/sketch-symbol.svg'; -import githubSymbol from '../../images/icon/github-icon.svg'; -import reactSymbol from '../../images/icon/react-icon.svg'; -import webComponentsSymbol from '../../images/icon/web-components-icon.svg'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - Overview - Card section - Card section with images - Feedback - - -## Overview - -Card section and Card section with images are section-level components. The left side container of each includes a -section heading, while the right side includes an array of cards, either with body copy (Card section) or images (Card -section with images). Both components use the underlying component [Card group](/components/card-group). - -## Card section - -Card section uses cards with a header and body copy to present links to other pages within IBM.com. - -![A visual of Card section simple](../../images/pattern/card-section/card-section-simple.jpg) - -An example of Card section - -### Modifiers - -#### With CTA - -In this variation, the last card in the Card group is set to high contrast and can be used to highlight the primary -action that the user can take. - -![A visual of Card section with CTA](../../images/pattern/card-section/card-section-cta.jpg) - - - When Card section has a CTA, the last card will be set to high contrast. - - - - -### Content guidance for Card section - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Heading | Text | Yes | 1 | 25 / 35 | | -| [Card](https://www.ibm.com/standards/carbon/components/cards/#card) | Component | Yes | 2–9 | – | If using a CTA card. the max is 8 cards plus 1 CTA card. | -| CTA (card) | Component | No | 1 | – | This CTA is from the [Card group](https://www.ibm.com/standards/carbon/components/card-group/) component, please use the above link to find more information on this CTA type. | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - -## Card section with images - -Card section with images brings images into each card in the section. Like Card section, this component is used for -presenting resources or links, but presents images instead of body copy in each card. - -When using this component, avoid using a CTA card as this will cause the card heading to misalign. - -![Card section images](../../images/pattern/card-section/card-section-images.jpg) - -An example of Card section with images - - - -### Content guidance for Card section with images - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | ------------------------------------------------ | -| Heading | Text | Yes | 1 | 25 / 35 | | -| [Card](https://www.ibm.com/standards/carbon/components/cards/#card) | Component | Yes | 2–9 | – | For this component, you must use the image card. | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/content-block-cards.mdx b/src/pages/components/content-block-cards.mdx deleted file mode 100644 index 377c978f6..000000000 --- a/src/pages/components/content-block-cards.mdx +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Content block cards -description: - Content block cards is used to present small self-contained pieces of information as cards. Use this when the cards - are part of the main narrative, as opposed to secondary links or resources. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Variations -Content guidance -Feedback - - - - - -## Overview - -The default version pairs the Content block heading and [card group](https://www.ibm.com/standards/carbon/components/card-group) component. Use when you need to introduce a card group as its own content block without a description. - -Content block cards does not support body copy. If you need to set more context, consider using a content block with a nested card group. - -![A visual of the Content block cards including a group of cards with only text.](../../images/pattern/content-block-with-cards/content-block-with-cards.jpg) - -
- -## Variations - -### With images - -Content block cards can use images to help tell its story to the user. This is great for breaking up dense text, adding -a little visual flare, and creating instant recognition. - -![A visual of the Content block cards including a group of cards with only text.](../../images/pattern/content-block-with-cards/content-block-with-cards-with-images.jpg) - -### With videos - -Sometimes a video will support the pages' narrative, but should not be prominently featured. This variation can be used -to provide those types of videos from within the page without creating a distraction that leads them out of the -narrative. - -![Image of Content block simple with aside elements](../../images/pattern/content-block-with-cards/content-block-with-cards-with-videos.jpg) - -
- -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ------------------------------------------------------------------------ | ------------ | -------- | --------- | ------------------------------------------- | -------------------------------------------------------------------------------- | -| Heading | Text | Yes | 1 | 40 / 55 | Heading override can be used when using Table of contents. | -| [Card group](https://www.ibm.com/standards/carbon/components/card-group) | Component | Yes | 1 | – | Minimum of 2 cards. | -| [CTA](https://www.ibm.com/standards/carbon/components/cta#card) | Component | No | 1 | – | This is a content block CTA, not the CTA in the card group. Card style CTA only. | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content/#character-count-standards). - - diff --git a/src/pages/components/content-block-horizontal.mdx b/src/pages/components/content-block-horizontal.mdx deleted file mode 100644 index 85e0be17d..000000000 --- a/src/pages/components/content-block-horizontal.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Content block horizontal -description: - Content block horizontal can be used to present important areas of interest relating to your topic, such as products - or solutions. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Content guidance -Feedback - - - - - -## Overview - -On a page with largely vertical content, Content block horizontal presents a moment to enhance vertical rhythm by -switching up the reading direction. It is also a good component for presenting a large amount of CTAs with context. -Please note that no CTA should be used within this Content block except the ones included within -[Content item horizontal](https://www.ibm.com/standards/carbon/components/content-item-horizontal) components. - - - - -![Content block horizontal](../../images/component/content-block-horizontal/contentblockhorizontal-overview.png) - - - - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| -------------------------------------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------ | ---------------------------------------------------------- | -| Heading | Text | Yes | 1 | 40 / 55 | Heading override can be used when using table of contents. | -| [Content item horizontal](https://www.ibm.com/standards/carbon/components/content-item-horizontal) | Component | Yes | 1–8 | – | | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/content-block-media.mdx b/src/pages/components/content-block-media.mdx deleted file mode 100644 index cba9e97cc..000000000 --- a/src/pages/components/content-block-media.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Content block media -description: Content block media is used to present information with images in a group setting. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Variations -Content guidance -Feedback - - - - - -## Overview - -By default Content block media starts with a brief overview before going into one or more detailed points. At strategic -points it allows for an optional piece of media to support the content. - -![A visual of Content block media with its overview and supporting content.](../../images/pattern/content-block-media/content-block-with-media.jpg) - -
- -## Variations - -### With aside elements - -This variant is the same as the default version except that it allows for a list of related navigational items -positioned to the side. - -![A visual of Content block media with optional navigational items to the side.](../../images/pattern/content-block-media/content-block-with-media-with-aside-elements.jpg) - -
- -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ---------------------------------------------------------- | ------------ | -------- | ----------- | ------------------------------------------- | ---------------------------------------------------------------------------------------- | -| Headline | Text | Yes | 1 | 40 / 55 | Heading override can be used when using table of contents. | -| Copy | Text | No | 1 | 250 / 325 | | -| [Content group simple](../components/content-group-simple) | Component | Yes | Less than 4 | – | | -| [CTA](../components/cta) | Component | No | 1 | – | [Feature card - medium](../components/cards#feature-card) (local or jump CTA type only). | -| Aside container | Component | No | 1 | – | | - -For more information, see the -[character count standards](https://www.ibm.com/standards/carbon/guidelines/content/#character-count-standards). - - diff --git a/src/pages/components/content-block-segmented.mdx b/src/pages/components/content-block-segmented.mdx deleted file mode 100644 index 6bd98fc0b..000000000 --- a/src/pages/components/content-block-segmented.mdx +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Content block segmented -description: - Content block segmented is used for introducing page content. It is similar to Content block simple but has added - ability to include subsections. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Variations -Content guidance -Feedback - - - - - -## Overview - -Default Content block segmented allows you to break up the narrative content into sections. It includes a heading, -introductory paragraph, subsections, optional CTA (call-to-action), optional media (image or video), and horizontal -rule. - -![Image of content block simple default](../../images/pattern/content-block-segmented/content-block-segmented.jpg) - -
- -## Variations - -### With aside elements - -This variation includes navigational quick links on the right side. These quick links provide an alternate route -directing users to resources related to the content in the main body. - -![Image of content block simple with aside elements](../../images/pattern/content-block-segmented/content-block-segmented-with-aside-elements.jpg) - -
- -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ------------------------------------------- | --------------------------------------------------------------- | --- | -| Heading | Text | Yes | 1 | 65 / 85 | Heading override can be used when using table of contents. | -| Copy | Text | Yes | 1 | 350 / 450 | | -| Media | [Image](https://www.ibm.com/standards/carbon/components/images/) or [Video](https://www.ibm.com/standards/carbon/components/video) | No | 1 | – | Image with caption may also be used. | | -| Image alt text | Text | No | 1 | 75 / 100 | Image description for accessibility. | -| [Content group](https://www.ibm.com/standards/carbon/components/content-group) | Component | Yes | 2–3 | – | | -| [CTA](https://www.ibm.com/standards/carbon/components/cta/) | Component | No | 1 | – | Text and card styles only; jump, local, or external types only. | -| Aside container | Component | No | 1 | – | | - -For more information, see the -[character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/content-block-simple.mdx b/src/pages/components/content-block-simple.mdx deleted file mode 100644 index 62e764602..000000000 --- a/src/pages/components/content-block-simple.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Content block simple -description: Content block simple is typically used as the introductory section on a page. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Variations -Content guidance -Feedback - - - - - -## Overview - -Content block simple is a top-level component meaning it is typically located at the top of a page to introduce content. -It includes a heading, introductory paragraph, optional media (image or video), optional CTA (call-to-action), and -horizontal rule. - -![Image of content block simple default](../../images/pattern/content-block-simple/content-block-simple.jpg) - -
- -## Variations - -### With aside elements - -This variant is the same as the default version and it also allows for a list of related navigational items positioned to the right side. - -![Image of content block simple with aside elements](../../images/pattern/content-block-simple/content-block-simple-with-aside-elements.jpg) - -
- -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ------------------------------------------- | ---------------------------------------------------------- | -| Heading | Text | Yes | 1 | 40 / 55 | Heading override can be used when using table of contents. | -| Copy | Text | Yes | 1 | 1600 / 2400 | | -| Media | [Image](https://www.ibm.com/standards/carbon/components/images/) or [Video](https://www.ibm.com/standards/carbon/components/video) | No | 1 | – | | -| Image alt text | Text | No | 1 | 75 / 100 | Image description for accessibility. | -| [CTA](https://www.ibm.com/standards/carbon/components/cta) | Component | No | 1 | – | All styles except for card. | -| Aside container | Component | No | 1 | – | | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/content-block.mdx b/src/pages/components/content-block.mdx deleted file mode 100644 index c6c421e05..000000000 --- a/src/pages/components/content-block.mdx +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Content block -description: - Content block is a high-level content component that acts as the content unit inside a Content section. It - encapsulates other content components (one or multiple Content groups) and brings them together into a custom visual - which solves a specific problem for the user. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Behaviors -Tips and techniques -Content guidance -Related components -Feedback - - - - - -## Overview - -The Content block component can be used and customized for different types of web experiences. It can be used multiple -times inside a Content section component, acting as a main content unit for it. - - - - - -![A visual example of the Content block](../../images/component/content-block/component--content-block--overview.png) - - - - - -Anatomy of the Content block - -
- -1. **Heading:** Customizable heading for the Content block component. -2. **Description:** A short optional description. -3. **Primary child container:** Use this to insert other high-level content units, such as Content groups. -4. **CTA:** Use this component as a general call to action at block level. -5. **Aside container:** This container is used only to insert aside elements, or a link list, for the Content block. - -#### When to use - -Use Content block when you need to organize a web page experience into high-level content units inside of a Content -section. One of the advantages of the block is that it is visually very prominent on the page, thanks to its large -heading and accompanying description. Use it inside a complex Content section to hierarchically separate different -content units for easier reading and comprehension. - -#### When not to use - -Do not look to Content blocks as a replacement for Content sections. A page is separated into sections, and then within -the sections there is further separation into blocks. Do not use a Content block to only separate content items, or -other related basic content units like paragraphs inside of a web page. Use a Content group instead. - -## Behaviors - -The Content block elements are persistent throughout the online experience. The component is fully responsive and the -display adjusts with different browser sizes. - -#### Desktop breakpoints - -If the browser is wider than the max breakpoint of 1584px, the Content block and all other page content will center and -the margins on either side of the page layout will increase. The Content block is recommended to take the last 12 -columns of the 16-column grid. Within these 12 columns, the block heading, description, primary child container, and the -CTA will take the first 8 grid columns, and the aside will take the last 4 grid columns. - -For particular editorial experiences where there is no aside, it is possible to lay out a Content block on 4 columns, -making the reading experience more story-like and engaging. - -#### Mobile breakpoints - -At medium and small breakpoints, the Content block will add a significant change: the primary child container will move -above the Content block CTA and the aside will move to the bottom of the Content block. See below. - - - - - -![A visual example of the Content block component at desktop breakpoints](../../images/component/content-block/component--content-block--behavior.png) - -Content block at desktop and mobile breakpoints - - - - - -### Examples - -These examples showcase the versatility of Content block, showing first how it can include a Content group with aside -elements, alternating with a Content block containing a Card group of four cards. - - - - - -![A visual example of the Content block component](../../images/component/content-block/component--content-block--showcase.gif) - - - - - - - A few Content block options: with Content group and aside elements (first), or - with a Card group (second). - - -## Tips and techniques - -Content block elements are persistent throughout the online experience. It is fully responsive and changes how elements -are displayed based on the browser size. - -Keep in mind that on medium and small breakpoints, the primary container is positioned between the Content block -description and the CTA text link. - -Avoid CTA stacking at the end of a Content block. If possible, use different types. - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ---------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------ | -| Heading | Text | No | 1 | 40 / 55 | | -| Copy | Text | No | 1 | 120 / 150 | | -| Primary child container | Component | No | 1 | – | A container area that other content components and content types can be passed into. | -| [CTA](https://www.ibm.com/standards/carbon/components/cta) | Component | No | 1 | – | All styles except for card. | -| Aside container | Component | No | 1 | – | A container area where only aside elements can be passed into. | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - -## Related components - -| Component name | Description | -| -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Content block cards](https://www.ibm.com/standards/carbon/components/card-group) | Content block cards is a Content block that includes a content block heading and in the child container, it contains a Card group component. | -| [Content block horizontal](https://www.ibm.com/standards/carbon/components/content-group-cards) | Content block horizontal is a Content block that includes a content block heading and group of Content item horizontal elements. | -| [Content block media](https://www.ibm.com/standards/carbon/components/content-group-pictograms) | Content block media is a Content block that includes a content section heading, an expressive paragraph, and two Content groups with Content items. | -| [Content block mixed groups](https://www.ibm.com/standards/carbon/components/content-group-simple) | Content block mixed groups is a Content block that includes a heading, an expressive paragraph, and three content groups: a Card group, a Content group pictograms, and a Content group simple. | -| [Content block segmented](https://www.ibm.com/standards/carbon/components/content-group-simple) | Content block segmented is a Content block that includes a heading, a subheading, three content groups in the primary child container and also an optional link list in the aside container. | -| [Content block simple](https://www.ibm.com/standards/carbon/components/content-group-simple) | Content block simple is a custom Content block that includes a heading, a description, a link list in the aside container, and optional media and CTA (text link with icon, or card link). | - - diff --git a/src/pages/components/content-group-cards.mdx b/src/pages/components/content-group-cards.mdx deleted file mode 100644 index 29ab30749..000000000 --- a/src/pages/components/content-group-cards.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Content group cards -description: Content group cards is used to present information through a group of cards with each acting as a call to action that drives to additional or supporting destinations. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Content guidance -Feedback - - - - - -## Overview - -Content group cards includes a section heading, body copy, and any number of card components listed below. This pattern can be used multiple times within a content block. - -![Image of content group cards](../../images/pattern/content-group-with-cards/content-group-with-cards.jpg) - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ------------------------------------------------------------------------ | ------------ | -------- | --------- | ------------------------------------------- | ----- | -| Heading | Text | Yes | 1 | 40 / 55 | | -| Copy | Text | No | 1 | 350 / 450 | | -| [Card group](https://www.ibm.com/standards/carbon/components/card-group) | Component | Yes | 1 | – | | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content/#character-count-standards). - - diff --git a/src/pages/components/content-group-pictograms.mdx b/src/pages/components/content-group-pictograms.mdx deleted file mode 100644 index 0c1fd2b97..000000000 --- a/src/pages/components/content-group-pictograms.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Content group pictograms -description: Content group pictograms is to present a group of information, each with a supporting pictogram. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Content guidance -Feedback - - - - - -## Overview - -Content group pictograms consists of a heading, introduction, and a series of concise content each with their own pictogram. The pictograms are useful for visually engaging users and conveying important information through illustration. The pictogram can be viewed and download the IBM Design Language pictogram library. - -![Default](../../images/pattern/content-group-pictograms/content-group-with-pictograms.jpg) - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| -------------- | ------------ | -------- | --------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -| Heading | Text | Yes | 1 | 40 / 55 | | -| Copy | Text | No | 1 | 450 / 590 | Recommended character count may vary based on the intent of the page and may be uncapped for some page types. | -| Pictogram item | Component | Yes | 2–6 | – | | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/content-group-simple.mdx b/src/pages/components/content-group-simple.mdx deleted file mode 100644 index 112388c96..000000000 --- a/src/pages/components/content-group-simple.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Content group simple -description: - Content group simple is an alternative form of a narrative pattern where the content is broken up into smaller pieces - to make it easier to read. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Content guidance -Feedback - - - - - -## Overview - -Content group simple is ideal for grouping content within sections with smaller headlines. It includes an optional -introductory paragraph, CTA (call-to-action), and media (image or video). - -![Default](../../images/pattern/content-group-simple/default.jpg) - -
- -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | --------- | ------------------------------------------- | -------------------------------------------- | -| Heading | Text | Yes | 1 | 65 / 85 | | -| Copy | Text | No | 1 | 350 / 450 | | -| Media | [Image](https://www.ibm.com/standards/carbon/components/images/) or [Video](https://www.ibm.com/standards/carbon/components/video) | No | 1 | – | | -| Image alt text | Text | No | 1 | 75 / 100 | Image description for accessibility. | -| [Content item](https://www.ibm.com/standards/carbon/components/content-item) | Component | Yes | 2–6 | – | | -| [CTA](https://www.ibm.com/standards/carbon/components/cta) | Component | No | 1 | – | Only card link style and local type allowed. | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/layout.mdx b/src/pages/components/layout.mdx deleted file mode 100644 index a76ff9403..000000000 --- a/src/pages/components/layout.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Layout -description: The Layout component is to be utilized within IBM.com for various abstract layout configurations. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -**Note:** Additional usage guidelines are coming soon. - - - - - -Resources -Feedback - - - - - - diff --git a/src/pages/components/link-list-section.mdx b/src/pages/components/link-list-section.mdx deleted file mode 100644 index f70281483..000000000 --- a/src/pages/components/link-list-section.mdx +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Link list section -description: The Link list section component is used for multiple CTAs, with options for vertical and horizontal lists and varying CTA styling. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Variations -Content guidance -Feedback - - - - - -## Overview - -The Link list section displays links in a list format with a semibold heading on the left side. - - - - -![Image of Card component](../../images/component/link-list-section/link-list-section-default.jpg) - - - - -
- -## Variations - -### One to three links - -This variation divides the content’s remaining 8 column layout into 1 column when there are 1 to 3 links. - - - - -![Image of Card component](../../images/component/link-list-section/link-list-section-one-to-three-links.jpg) - - - - -### Four to six links - -This variation divides the content’s remaining 8 column layout into 2 columns when there are 4 to 6 links. - - - - -![Image of Card component](../../images/component/link-list-section/link-list-section-four-to-six-links.jpg) - - - - -### Seven or more links - -This variation divides the content’s remaining 12 column layout into 3 columns when there are 7 or more links. - - - - -![Image of Card component](../../images/component/link-list-section/link-list-section-seven-or-more-links.jpg) - - - - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ----------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -| Heading | Text | Yes | 1 | 40 / 55 | | -| [CTA](https://www.ibm.com/standards/carbon/components/cta/) | Component | Yes | Max 16 | 40 / 55 | Uses [Link list end of section](https://www.ibm.com/standards/carbon/components/link-list/#end-of-section). | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/pictogram-item.mdx b/src/pages/components/pictogram-item.mdx deleted file mode 100644 index 7ae3391e7..000000000 --- a/src/pages/components/pictogram-item.mdx +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Pictogram item -description: The Pictogram item is used to communicate messages at a glance, afford interactivity, and simplify complex ideas. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Content guidance -Feedback - - - - - -## Overview - - - - -![Pictogram item component](../../images/component/pictogram-item/pictogramitem-overview.png) - - - - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ---------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | -------------------- | -| Heading | Text | Yes | 1 | 120 / 150 | | -| Copy | Text | Yes | 1 | 350 / 450 | | -| Pictogram | Icon | Yes | 1 | – | | -| [CTA](https://www.ibm.com/standards/carbon/components/cta/#text) | Component | No | 1 | – | Text style CTA only. | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/resources/index.mdx b/src/pages/resources/index.mdx deleted file mode 100644 index d5b4dbf82..000000000 --- a/src/pages/resources/index.mdx +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Resources -description: Carbon for IBM.com Resources page -createdOn: 12/20/2019 -updatedOn: 05/24/2021 ---- - - - -Everything you need to learn about, work with, and contribute to Carbon for -IBM.com. - - - - - -Development resources -Design resources -Tools - - - -## Development resources - -### GitHub repos - - - - - -![GitHub icon](../../images/icon/github-icon.svg) - - - - - - -![GitHub icon](../../images/icon/github-icon.svg) - - - - - - -![GitHub icon](../../images/icon/github-icon.svg) - - - - - -### Storybook - - - - - -![Web components icon](../../images/icon/web-components-icon.svg) - - - - - - - -![React icon](../../images/icon/react-icon.svg) - - - - - - - -![React icon](../../images/icon/react-icon.svg) - - - - - -### Documentation - - - - - -![GitHub icon](../../images/icon/github-icon.svg) - - - - - -### API Docs - - - - - -![GitHub icon](../../images/icon/github-icon.svg) - - - - - - -![GitHub icon](../../images/icon/github-icon.svg) - - - - - -## Design resources - -### Carbon for IBM.com - -All Carbon for IBM.com design resources are available on our [Designing](https://www.ibm.com/standards/carbon/designing) page. - -### Color, grid, and icons - - - - - - -![ASE icon](../../images/icon/ase_logo.svg) - - - - - - - -![Sketch icon](../../images/icon/sketch-symbol.svg) - - - - - - - -![Color contrast icon](../../images/icon/color-contrast-icon.svg) - - - - - - - -![Sketch icon](../../images/icon/sketch-symbol.svg) - - - - - - - -![Sketch icon](../../images/icon/sketch-symbol.svg) - - - - - - - -![Sketch icon](../../images/icon/sketch-symbol.svg) - - - - - - -
- -## Tools - - - - - - -![Devtool icon](../../images/icon/devtool-icon.svg) - - - - - - - -![IBM bee icon](../../images/icon/bee_icon.svg) - - - - - - - -![IBM bee icon](../../images/icon/bee_icon.svg) - - - - - - - -![Color contrast icon](../../images/icon/color-contrast-icon.svg) - - - - - - - -![IBM Accessibility icon](../../images/icon/bee_icon.svg) - - - - - - - - -![Slack](../../images/icon/slack-mark.svg) - - - - diff --git a/wiki/Layout-component/Content-block-cards.md b/wiki/Layout-component/Content-block-cards.md deleted file mode 100644 index 796323804..000000000 --- a/wiki/Layout-component/Content-block-cards.md +++ /dev/null @@ -1,48 +0,0 @@ - - -[[Content block cards]] is a decorator block component that allows adopters to -display the [[Card group]] inside the [[Content block]] children container. - -![image](https://user-images.githubusercontent.com/3793636/119081429-8b30f400-b9c1-11eb-8db0-33de8299b1e9.png) - -
- - - -
- Dependencies ()
- -- [[Content block]] -- [[Card group]] - -
-
- - - -_{{usedby auto populates}}_ - - - - - -_{{backlinks auto populates}}_ - - - - - -
- Resources
- -- r1: [Box folder](https://ibm.ent.box.com/folder/111084561933) - -
-
- -
- -
- -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See box folder [r1](#resources) for more details diff --git a/wiki/Layout-component/Content-block-horizontal.md b/wiki/Layout-component/Content-block-horizontal.md deleted file mode 100644 index af98573e8..000000000 --- a/wiki/Layout-component/Content-block-horizontal.md +++ /dev/null @@ -1,84 +0,0 @@ -`Decorator` - -[[Content block horizontal]] is a decorator block component for displaying -[[Content item horizontal]] components in the children container of the -[[Content Block]] as a list. - -![component--content-block-horizontal](https://user-images.githubusercontent.com/3793636/138486851-4aaa2d46-bd57-4358-8fbf-3ef4d1cb25c2.jpg) - -
- - - -
- Dependencies ()
- -- [[Content block]] -- [[Content item horizontal]] - -
-
- - - -_{{usedby auto populates}}_ - - - - - -_{{backlinks auto populates}}_ - - - - - -
- Resources
- -- r1: [Box folder](https://ibm.ent.box.com/folder/112271053028) - -
-
- -
- -
- -### 1. Content block - -`component` - -The [[Content block]] provides us the visual consistency of our other block -level components. This decorator only uses its `heading`, and `children` options -where the [[Content item horizontal]] [2](#2-content-item-horizontal) -components will sit in. - -#### 1.2 Heading - -`required` `string` - -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See [[Content block]] for more details. - -#### 1.2 Children - -`required` `container` - -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See [[Content block]] for more details. - -### 2. Content item horizontal - -`required` `component` - -[[Content item horizontal]] uses the component directly as is, and can display -**_one or more_** within the [[Content block]] children -[1.2](#12-children) container. - -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See [[Content item horizontal]] for more details. - -###### Example - -content-block-horizontal-children diff --git a/wiki/Layout-component/Content-block-media.md b/wiki/Layout-component/Content-block-media.md deleted file mode 100644 index 2e5064855..000000000 --- a/wiki/Layout-component/Content-block-media.md +++ /dev/null @@ -1,49 +0,0 @@ -`Decorator` - -The [[Content block media]] is a decorator of the [[Content block]], which -includes a number of [[Content group simple]], and ends with an optional -[[Feature card]] [[CTA]] option. - -![image](https://user-images.githubusercontent.com/3793636/119081655-0db9b380-b9c2-11eb-89eb-6879d936af13.png) - -
- - - -
- Dependencies ()
- -- [[Content block]] -- [[Content group simple]] - -
-
- - - -_{{usedby auto populates}}_ - - - - - -_{{backlinks auto populates}}_ - - - - - -
- Resources
- -- r1: [Box folder](https://ibm.ent.box.com/folder/94760926421) - -
-
- -
- -
- -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See box folder [r1](#resources) for more details diff --git a/wiki/Layout-component/Content-block-mixed-groups.md b/wiki/Layout-component/Content-block-mixed-groups.md deleted file mode 100644 index 86293c09e..000000000 --- a/wiki/Layout-component/Content-block-mixed-groups.md +++ /dev/null @@ -1,51 +0,0 @@ -`Decorator` - -The [[Content block mixed groups]] component leverages the [[Content block]] as -the overall container, and allows only a few opinionated group level components -to be included. - -![image](https://user-images.githubusercontent.com/3793636/119081943-ae0fd800-b9c2-11eb-9d24-05ad185cc2b9.png) - -
- - - -
- Dependencies ()
- -- [[Content block]] -- [[Content group simple]] -- [[Content group pictograms]] -- [[Content group cards]] - -
-
- - - -_{{usedby auto populates}}_ - - - - - -_{{backlinks auto populates}}_ - - - - - -
- Resources
- -- r1: [Box folder](https://ibm.ent.box.com/folder/89982493307) - -
-
- -
- -
- -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See box folder [r1](#resources) for more details diff --git a/wiki/Layout-component/Content-block-segmented.md b/wiki/Layout-component/Content-block-segmented.md deleted file mode 100644 index d3f578644..000000000 --- a/wiki/Layout-component/Content-block-segmented.md +++ /dev/null @@ -1,55 +0,0 @@ -`Decorator` - -The [[Content block segmented]] component allows for a lot of content to be -present at once. It’s laid out in a way to be easily consumed and understood by -its users. - -![image](https://user-images.githubusercontent.com/3793636/119082233-4443fe00-b9c3-11eb-8497-826dbd73b905.png) - -
- - - -
- Dependencies ()
- -- [[Content block]] -- [[Content group]] -- [[Content item]] -- [[Image with caption]] -- [[Video]] - -
-
- -> ![image](https://user-images.githubusercontent.com/3793636/117873641-a6835d00-b265-11eb-8433-8c9c73a2e999.png) -> Need to re-evaluate dependency list - - - -_{{usedby auto populates}}_ - - - - - -_{{backlinks auto populates}}_ - - - - - -
- Resources
- -- r1: [Box folder](https://ibm.ent.box.com/folder/99730444060) - -
-
- -
- -
- -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See box folder [r1](#resources) for more details diff --git a/wiki/Layout-component/Content-block-simple.md b/wiki/Layout-component/Content-block-simple.md deleted file mode 100644 index 03ced9435..000000000 --- a/wiki/Layout-component/Content-block-simple.md +++ /dev/null @@ -1,51 +0,0 @@ -`Decorator` - -The [[Content block simple]] is a decorator of the [[Content block]], which -includes a single [[Content item]], optional media ([[Image with caption]] or -[[Video]]) and ends with a [[CTA]]. - -![image](https://user-images.githubusercontent.com/3793636/119082343-79505080-b9c3-11eb-89b3-124946e4f98c.png) - -
- - - -
- Dependencies ()
- -- [[Content block]] -- [[Content item]] -- [[Image with caption]] -- [[Video]] - -
-
- - - -_{{usedby auto populates}}_ - - - - - -_{{backlinks auto populates}}_ - - - - - -
- Resources
- -- r1: [Box folder](https://ibm.ent.box.com/folder/99725042603) - -
-
- -
- -
- -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See box folder [r1](#resources) for more details diff --git a/wiki/Layout-component/Content-block.md b/wiki/Layout-component/Content-block.md deleted file mode 100644 index 128194fb2..000000000 --- a/wiki/Layout-component/Content-block.md +++ /dev/null @@ -1,156 +0,0 @@ -`Core` - -The [[Content block]] is a reusable core component used to help you build more -complex patterns by placing them within the [[Carbon 2x grid]] or a -[[Content section]]. Many of the options available at this level are optional -providing you with more flexibility. - - - -![content-block-static](https://user-images.githubusercontent.com/3793636/121604082-82a36a80-ca0f-11eb-9b51-e44712b477f2.jpg) - -
- - - -_{{toc auto populates}}_ - - - -
- Dependencies ()
- -- [[Data model]] -- [[Markdown utility]] -- [[Link list]] -- [[Layout]] -- [[CTA]] - -
-
- - - -_{{usedby auto populates}}_ - - - - - -_{{backlinks auto populates}}_ - - - - - -
- Resources
- -- r1: [Box folder](https://ibm.ent.box.com/folder/99481428439) - -
-
- -
- -
- -### 1. Heading - -`optional` `string` - -An optional short `String` of text to indicate a change in topic at an `H2` -heading level. - -
[Back to top](#wiki-wrapper)


- -### 2. Copy - -`optional` `markdown` - -An optional `String` of text formatted using the [[Markdown utility]]. It -provides the component with a high level overview of its content. - -###### Only include - -> All other options should be ignored. - -| | props | description | -| :---- | :---------------- | :------------------------------------------------- | -| `2.1` | `*italic*` | The _italic_ option should be included. | -| `2.2` | `

new line

` | The new line paragraph feature should be included. | - -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See [[Markdown utility]] for more information. - -
[Back to top](#wiki-wrapper)


- -### 3. Children - -`optional` `container` - -An optional container area that child components, and other content types can be -passed into. - -###### Example - -![content-block](https://user-images.githubusercontent.com/3793636/121601206-3f46fd00-ca0b-11eb-9b38-7113fb525854.gif) - -
[Back to top](#wiki-wrapper)


- -### 4. CTA - -`optional` `component` - -An optional [[CTA]] that allows a user to navigate to related content. - -###### Properties and values - -| | props | values | -| :---- | :------ | :--------------------------- | -| `4.1` | `type` | All types | -| `4.2` | `style` | All styles except for `card` | - -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See [[CTA]] for more information. - -
[Back to top](#wiki-wrapper)


- -### 5. Aside - -`optional` `container` - -An optional secondary container for child components, and other content types. -The content provided in this container should be secondary supporting content -towards the component's main content. - -###### Logic - -| | condition | description | -| :---- | :---------------- | :------------------------------------------------------------------------------------------------------------- | -| `5.1` | `aside === true` | If aside is true and contains children then [[Layout]] [5.3](#53-layout) is used to wrap content. | -| `5.2` | `aside === false` | If the aside is not provided or missing children than [[Layout]] [5.3](#53-layout) is NOT included. | - -###### Example - -![content-block-aside](https://user-images.githubusercontent.com/3793636/121902980-72c8a680-cced-11eb-8635-1531dff0b4e2.gif) - -#### 5.3 Layout - -`built-in` `component` - -If rendered, the [[Layout]] utility helps lay the main content and the Aside -[5](#5-aside) container next to each other properly within the -[[Carbon 2x grid]]. - -###### Properties and values - -| | props | values | -| :------ | :------- | :----- | -| `5.3.1` | `type` | `8-4` | -| `5.3.2` | `nested` | `true` | - -> ![image](https://user-images.githubusercontent.com/3793636/117873919-f6faba80-b265-11eb-81a5-039bdcd822e8.png) -> See [[Layout]] for more information. - -
[Back to top](#wiki-wrapper)


From bf8ce5c6a2810772329a117953a8035b28d1db12 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Thu, 28 Sep 2023 10:33:58 -0700 Subject: [PATCH 2/2] fix(website) remove pics --- .../ComponentGallery/images/card_section.svg | 16 ------ .../images/card_section_images.svg | 38 ------------- .../images/content_block_cards.svg | 16 ------ .../images/content_block_horizontal.svg | 42 --------------- .../images/content_block_media.svg | 28 ---------- .../images/content_block_segmented.svg | 35 ------------ .../images/content_block_simple.svg | 33 ------------ .../images/content_group_cards.svg | 15 ------ .../images/content_group_pictograms.svg | 37 ------------- .../images/content_group_simple.svg | 31 ----------- .../ComponentGallery/images/layout.svg | 29 ---------- .../images/link_list_section.svg | 38 ------------- .../images/pictogram_item.svg | 16 ------ src/data/components.json | 54 ------------------- 14 files changed, 428 deletions(-) delete mode 100755 src/components/ComponentGallery/images/card_section.svg delete mode 100755 src/components/ComponentGallery/images/card_section_images.svg delete mode 100755 src/components/ComponentGallery/images/content_block_cards.svg delete mode 100755 src/components/ComponentGallery/images/content_block_horizontal.svg delete mode 100755 src/components/ComponentGallery/images/content_block_media.svg delete mode 100755 src/components/ComponentGallery/images/content_block_segmented.svg delete mode 100644 src/components/ComponentGallery/images/content_block_simple.svg delete mode 100755 src/components/ComponentGallery/images/content_group_cards.svg delete mode 100755 src/components/ComponentGallery/images/content_group_pictograms.svg delete mode 100755 src/components/ComponentGallery/images/content_group_simple.svg delete mode 100755 src/components/ComponentGallery/images/layout.svg delete mode 100644 src/components/ComponentGallery/images/link_list_section.svg delete mode 100755 src/components/ComponentGallery/images/pictogram_item.svg diff --git a/src/components/ComponentGallery/images/card_section.svg b/src/components/ComponentGallery/images/card_section.svg deleted file mode 100755 index 900111414..000000000 --- a/src/components/ComponentGallery/images/card_section.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - card_section_simple - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/card_section_images.svg b/src/components/ComponentGallery/images/card_section_images.svg deleted file mode 100755 index 808e4eb0a..000000000 --- a/src/components/ComponentGallery/images/card_section_images.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - card_section_image - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_block_cards.svg b/src/components/ComponentGallery/images/content_block_cards.svg deleted file mode 100755 index f98f6d9bf..000000000 --- a/src/components/ComponentGallery/images/content_block_cards.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - content_block_cards - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_block_horizontal.svg b/src/components/ComponentGallery/images/content_block_horizontal.svg deleted file mode 100755 index 78012c554..000000000 --- a/src/components/ComponentGallery/images/content_block_horizontal.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - content_block_horizontal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_block_media.svg b/src/components/ComponentGallery/images/content_block_media.svg deleted file mode 100755 index 70bed1f33..000000000 --- a/src/components/ComponentGallery/images/content_block_media.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - content_block_media - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_block_segmented.svg b/src/components/ComponentGallery/images/content_block_segmented.svg deleted file mode 100755 index d41a8aeb1..000000000 --- a/src/components/ComponentGallery/images/content_block_segmented.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - content_block_segmented - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_block_simple.svg b/src/components/ComponentGallery/images/content_block_simple.svg deleted file mode 100644 index cc6e8ae29..000000000 --- a/src/components/ComponentGallery/images/content_block_simple.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - content_block_simple - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_group_cards.svg b/src/components/ComponentGallery/images/content_group_cards.svg deleted file mode 100755 index 50516d531..000000000 --- a/src/components/ComponentGallery/images/content_group_cards.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - content_group_cards - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_group_pictograms.svg b/src/components/ComponentGallery/images/content_group_pictograms.svg deleted file mode 100755 index 8a36cffbb..000000000 --- a/src/components/ComponentGallery/images/content_group_pictograms.svg +++ /dev/null @@ -1,37 +0,0 @@ - - - content_group_pictogram - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_group_simple.svg b/src/components/ComponentGallery/images/content_group_simple.svg deleted file mode 100755 index 276f1926b..000000000 --- a/src/components/ComponentGallery/images/content_group_simple.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - content_group_simple - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/layout.svg b/src/components/ComponentGallery/images/layout.svg deleted file mode 100755 index 2bfea1af4..000000000 --- a/src/components/ComponentGallery/images/layout.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - layout - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/link_list_section.svg b/src/components/ComponentGallery/images/link_list_section.svg deleted file mode 100644 index a5c9a28d0..000000000 --- a/src/components/ComponentGallery/images/link_list_section.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - link_list_section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/pictogram_item.svg b/src/components/ComponentGallery/images/pictogram_item.svg deleted file mode 100755 index eeeafe076..000000000 --- a/src/components/ComponentGallery/images/pictogram_item.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - pictogram_item - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/data/components.json b/src/data/components.json index ebdcb8e4e..633aafbdc 100644 --- a/src/data/components.json +++ b/src/data/components.json @@ -494,33 +494,6 @@ "notAvailable": false } }, - "Link list section": { - "url": "/components/link-list-section", - "designLink": "https://ibm.box.com/s/mktywz4ujxo9yiiu371kgzbib93uc2po", - "description": "Link list section is used for multiple CTAs, with options for vertical and horizontal lists and varying CTA styling.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-link-list-section--default", - "react": "" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": false, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": true, - "notAvailable": true - } - }, "Link with icon": { "url": "/components/link-with-icon", "designLink": "https://ibm.box.com/s/i3jd6saoz0m851j2ohggrn452bnd51dm", @@ -853,33 +826,6 @@ "notAvailable": false } }, - "Card section images": { - "url": "/components/card-section#card-section-images", - "designLink": "https://ibm.box.com/s/u4acyo9oeqya8xidimxtidh8k8y08fza", - "description": "Card section images is a collection of card components with images that, together, occupy a full-width section with a left-column header.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-card-section-images--default", - "react": "https://www.ibm.com/standards/carbon/react/?path=/story/components-card-section-images--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Content group": { "url": "/components/content-group", "designLink": "https://ibm.box.com/s/5n0sj6b3kkicnwimxmgnwb5owm46g8wz",