diff --git a/src/images/component/content-section/component--content-section--behavior.png b/src/images/component/content-section/component--content-section--behavior.png deleted file mode 100644 index 4c2e4739b..000000000 Binary files a/src/images/component/content-section/component--content-section--behavior.png and /dev/null differ diff --git a/src/images/component/content-section/component--content-section--overview.png b/src/images/component/content-section/component--content-section--overview.png deleted file mode 100644 index a428b6973..000000000 Binary files a/src/images/component/content-section/component--content-section--overview.png and /dev/null differ diff --git a/src/images/component/content-section/component--content-section--showcase.gif b/src/images/component/content-section/component--content-section--showcase.gif deleted file mode 100644 index 34c46b1df..000000000 Binary files a/src/images/component/content-section/component--content-section--showcase.gif and /dev/null differ diff --git a/src/images/component/content-section/component--content-section--structure.gif b/src/images/component/content-section/component--content-section--structure.gif deleted file mode 100644 index 9922346db..000000000 Binary files a/src/images/component/content-section/component--content-section--structure.gif and /dev/null differ diff --git a/src/images/component/content-section/content-section-anatomy.png b/src/images/component/content-section/content-section-anatomy.png index 005be4747..a3917aa17 100644 Binary files a/src/images/component/content-section/content-section-anatomy.png and b/src/images/component/content-section/content-section-anatomy.png differ diff --git a/src/images/component/content-section/content-section-behavior-01.png b/src/images/component/content-section/content-section-behavior-01.png index b712f8316..a2c51f2e5 100644 Binary files a/src/images/component/content-section/content-section-behavior-01.png and b/src/images/component/content-section/content-section-behavior-01.png differ diff --git a/src/images/component/content-section/content-section-behavior-02.png b/src/images/component/content-section/content-section-behavior-02.png index cebf627ff..351450da2 100644 Binary files a/src/images/component/content-section/content-section-behavior-02.png and b/src/images/component/content-section/content-section-behavior-02.png differ diff --git a/src/images/component/content-section/content-section-gallery-01.png b/src/images/component/content-section/content-section-gallery-01.png new file mode 100644 index 000000000..1fa0a569e Binary files /dev/null and b/src/images/component/content-section/content-section-gallery-01.png differ diff --git a/src/images/component/content-section/content-section-gallery-02.png b/src/images/component/content-section/content-section-gallery-02.png new file mode 100644 index 000000000..786ae4631 Binary files /dev/null and b/src/images/component/content-section/content-section-gallery-02.png differ diff --git a/src/images/component/content-section/content-section-gallery-03.png b/src/images/component/content-section/content-section-gallery-03.png new file mode 100644 index 000000000..716e3619c Binary files /dev/null and b/src/images/component/content-section/content-section-gallery-03.png differ diff --git a/src/images/component/content-section/content-section-gallery-04.png b/src/images/component/content-section/content-section-gallery-04.png new file mode 100644 index 000000000..34d160e1e Binary files /dev/null and b/src/images/component/content-section/content-section-gallery-04.png differ diff --git a/src/images/component/content-section/content-section-modifier-children-01.png b/src/images/component/content-section/content-section-modifier-children-01.png index 71c6af95b..55b566ee2 100644 Binary files a/src/images/component/content-section/content-section-modifier-children-01.png and b/src/images/component/content-section/content-section-modifier-children-01.png differ diff --git a/src/images/component/content-section/content-section-modifier-children-02.png b/src/images/component/content-section/content-section-modifier-children-02.png index b78bbf7ec..df30f90a1 100644 Binary files a/src/images/component/content-section/content-section-modifier-children-02.png and b/src/images/component/content-section/content-section-modifier-children-02.png differ diff --git a/src/images/component/content-section/content-section-modifier-children-03.png b/src/images/component/content-section/content-section-modifier-children-03.png new file mode 100644 index 000000000..e0af40b41 Binary files /dev/null and b/src/images/component/content-section/content-section-modifier-children-03.png differ diff --git a/src/images/component/content-section/content-section-overview.png b/src/images/component/content-section/content-section-overview.png index 6d3ac669a..95c405df4 100644 Binary files a/src/images/component/content-section/content-section-overview.png and b/src/images/component/content-section/content-section-overview.png differ diff --git a/src/pages/components/content-block.mdx b/src/pages/components/content-block.mdx index fdc923a25..8739a42d4 100644 --- a/src/pages/components/content-block.mdx +++ b/src/pages/components/content-block.mdx @@ -52,7 +52,8 @@ Content block is often paired with the content section or the vertical table of ![Content block with a section heading at the desktop breakpoint. The section heading is highlighted.](../../images/component/content-block/content-block-usage-01.png) - Content block paired with a content section, the content section heading is highlighted. + Content block paired with a content section, the content section heading is + highlighted. @@ -62,7 +63,8 @@ Content block is often paired with the content section or the vertical table of ![Content block with a table of contents - vertical at the desktop breakpoint. The table of contents - vertical is highlighted.](../../images/component/content-block/content-block-usage-02.png) - Content block paired with a table of contents vertical, the table of contents is highlighted. + Content block paired with a table of contents vertical, the table of contents + is highlighted. @@ -121,9 +123,7 @@ At smaller breakpoints the content block will respond to the 2x grid. ![Image of the content block at tablet breakpoint](../../images/component/content-block/content-block-behavior-01.png) - - Example of content block medium breakpoint - +Example of content block medium breakpoint @@ -131,9 +131,7 @@ At smaller breakpoints the content block will respond to the 2x grid. ![Image of the content section at mobile breakpoint](../../images/component/content-block/content-block-behavior-02.png) - - Example of content block at mobile breakpoint - +Example of content block at mobile breakpoint diff --git a/src/pages/components/content-section.mdx b/src/pages/components/content-section.mdx index 69c4b3e01..4fdbc8de5 100644 --- a/src/pages/components/content-section.mdx +++ b/src/pages/components/content-section.mdx @@ -17,13 +17,14 @@ import ResourceLinks from 'components/ResourceLinks'; Gallery Resources Content guidance +Related components Feedback ## Overview -The content section acts as the heading level two on all pages after the lead space component. The content section is used to divide the main categories or sections of the page to help guide the user through the content or narrative. +The content section acts as the heading level two on pages after the lead space component and spans the full 16 column grid. The content section is used to divide the main categories or sections of the page to help guide the user through the content or narrative. ![Image of the content section](../../images/component/content-section/content-section-overview.png) @@ -33,114 +34,55 @@ The content section acts as the heading level two on all pages after the lead sp ![Anatomy image of the content section](../../images/component/content-section/content-section-anatomy.png) -1. **Content section heading:** An optional, customizable heading for the Content section. -2. **Content block heading:** An optional, customizable heading for the Content section. -3. **Sub heading:** An opptional, customizable sub heading for the Content section. -4. **Copy:** An optional short description. -5. **Child container:** Insert additional components to enhance the narrative, such as content group, content item or card group. -6. **CTA:** Use this as a general call to action, typically used to encompass the entire content section. -7. **Border:** An optional bottom border. +1. **Content section heading:** A customizable heading for the Content section. +2. **Child container:** Insert additional components to enhance the narrative, such as content block, content group, content item or card group, etc. +3. **Border:** An optional bottom border. ## Modifiers -### Headings - -The content section has two types of optional headings – **content section** and **content block** – that can be turned on and off to fit the layout needs. - -![Image of the content section](../../images/component/content-section/content-section-modifier-heading-01.png) - -Example of the content section. - -#### Content section heading - -Turn off the content section heading to utilize the vertical [table of contents](../components/table-of-contents) component for long form reading experiences that allow the user to quickly navigate through the content. - - - - - -![Example highlighting content section heading](../../images/component/content-section/content-section-modifier-heading-02.png) - - - Example of the content section component, where the content section heading is - highlighted. - - - - - - -![Example highlighting table of contents](../../images/component/content-section/content-section-modifier-heading-03.png) - - - Example of replacing the content section heading with the vertical table of - contents. - - - - - +### Children -#### Content block heading +The content section can accept many different types of child components, which allows designers and authors maximum flexibility when creating page layouts. The most common layouts on IBM.com are 8 column and 12 column components. -Turn off the content block heading for concise layout samples, this layout works well with the horizontal table of contents component. +There is no limit to how many child components the content section can accept - consider the story you are trying to tell, the overall hierarchy of the page and how many content sections should be used to break up the content. View the [gallery](#gallery) to see examples of content section with various child components. - +#### 8 column child - +In this example the content section is paired with a group of [content item pictograms](../components/content-item) that span the center 8 columns of the grid. -![Example highlighting content block heading](../../images/component/content-section/content-section-modifier-heading-04.png) +![Image of a content section with an 8 column child component](../../images/component/content-section/content-section-modifier-children-01.png) - Example of the content section component, where the content block heading is - highlighted. + Example of the content section with a child component that spans 8 columns. - +#### 12 column child - +In this example the content section is paired with a [card group](../components/card-group) that spans 12 columns of the grid. -![Example highlighting the removal of the content block heading](../../images/component/content-section/content-section-modifier-heading-05.png) +![Image of a content section with an 12 column child component](../../images/component/content-section/content-section-modifier-children-02.png) - Example of turning off the content section's content block heading, and all - remaining content shifts upward to top align with the content section heading. + Example of the content section with a child component that spans 12 columns. - - - - -### Children - -The content section can accept many different types of child components, which allows designers and authors maximum flexibility when creating page layouts. The most common layouts on IBM.com are 8 column and 12 column components. +#### Mixing children widths -#### 8 column child +The content section can support mixing of various children and how many columns of the grid the children can span. Most of the Carbon for IBM.com components have been carefully designed with line length, and column usage in mind, and therefore should fit within the columns without alteration. -_Add description text here_ +In this example the content section has two children: +- A content block that spans 8 columns of the grid +- A group of content items that span 12 columns of the grid -![Image of a content section with an 8 column child component](../../images/component/content-section/content-section-modifier-children-02.png) +![Image of a content section with an 12 column child component](../../images/component/content-section/content-section-modifier-children-03.png) - Example of the content section with a child component that spans 8 columns. + Example of the content section with a child component that spans 8 columns, followed by another child that spans 12 columns. -#### 12 column child - -_Add description text here_ - -![Image of a content section with an 12 column child component](../../images/component/content-section/content-section-modifier-children-01.png) - - - Example of the content section with a child component that spans 12 columns. - - -There is no limit to how many child components the content section can accept - consider the story you are trying to tell, the overall hierarchy of the page and how many content sections should be used to break up the content. View the [gallery](#gallery) to see examples of content section with various child components. - ## Behaviors -The content section elements are persistent throughout the experience. It is fully responsive and changes how -elements are displayed based on the browser size, at tablet and mobile breakpoints the content section heading stacks on top of the content block heading. +The content section elements are persistent throughout the experience. It is fully responsive and changes how elements are displayed based on the browser size, at tablet and mobile breakpoints the content section heading stacks on top of the child container. @@ -166,20 +108,47 @@ elements are displayed based on the browser size, at tablet and mobile breakpoin The content section is the main building block for establishing sections throughout pages of the IBM.com platform. Here are some examples of various layouts you can create by utilizing the extreme flexibility the content section provides by utilizing the varying heading options and adding custom children. + + + +![Content section with tabs extended](../../images/component/content-section/content-section-gallery-01.png) + + + + +![Content section with content block and a group of content item pictograms](../../images/component/content-section/content-section-gallery-02.png) + + + + +![Content section with three children](../../images/component/content-section/content-section-gallery-03.png) + + + + +![Content section with card group](../../images/component/content-section/content-section-gallery-04.png) + + + + ## Content guidance | Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | | ---------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | -------------------------------------------------------------------------------------------- | -| Content section heading | Text | No | 1 | 25 / 35 | | -| Content block heading | Text | No | 1 | 40 / 55 | | -| Sub heading | Text | No | 1 | 120 / 150 | | -| Copy | Text | No | 1 | 1600 / 2400 | | -| Child container | Component | No | 1+ | – | An optional container area that child components and other content types can be passed into. | -| [CTA](https://www.ibm.com/standards/carbon/components/cta) | Component | No | 1 | 25 / 35 | | +| Content section heading | Text | Yes | 1 | 25 / 35 | | +| Child container | Component | Yes | 1+ | – | An optional container area that child components and other content types can be passed into. | | Border | Component | No | 1 | – | | 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](../components/content-block) | Content block is one of the main content components used to structure pages. | +| [Content group](../components/content-group) | Content group is one of the main content components used to display content items. | +| [Content item](../components/content-item) | Content item is the lowest level hierarchically of the content components. | +