Accordion Demo

This brick is useful for info-dumps like FAQs, footnotes and references. Some of the options may not work properly, especially relating to images.

The number of nested levels is a bit much--the brick itself holds more than one accordion panel, each of which can contain columns, each of which contains sub-bricks, and so on.

Alternative 3 Column Content Block

This one seems to display two equal columns and a third, smaller one.

Columns

This one makes even rows of three columns each.

Note: Images in medium-sized screens will appear in low quality.

Copy Brick

The copy brick is a basic and relatively versatile component which displays single-column page-width copy or images. It features limited text styling options, including _subscripts and ^superscripts.

This is another copy brick, demonstrating the component's other background color option. 

There is a 100% width option, but it is only for displaying large images in block format, as below.

Note that the first image above is restrained by the copy margins, but the image below is the full width of the page (same width as the top navigation bar).

Image Offset

This one is like a Media with Copy brick, except with a parallax effect which pushes the image behind the copy box. 

Media with Copy

This one is used a lot—the Copy section can be formatted as a Copy brick, and it looks best if H3 Dashed is used for a heading above the body copy, and a CTA button is placed below. Otherwise, it can be hard to visually balance the image and copy.

Multiple Column

This is a useful component. It contains a variable number of equal-width columns, each of which contains either Media or Rich Text sub-bricks. Note that the Rich Text sub-brick is better, as it can include media (which can then be adjusted, as in a Copy brick), while the Media sub-brick has no options.

This bricks will display three images side by side in -test but will not work in production.

Tyson Ventures Broken Multiple Column

Offset Content 2-Column

Two columns with width options: a wider right column (30%/70%), a wider left column (70%/30%), or even columns (50%/50%).

Each column may contain multiple sub-bricks, either Media or Rich Text (Copy). The Media brick is not recommended, as it has no options; instead, an image can easily be added to the Rich Text brick and then resized/adjusted. 

Pull Quote

Pretty self-explanatory. Quotation marks added automatically—do not include these in the Quote Field.

1. Background: Selection (examples below)
   • None
   • Wood Grain Texture
   • Blue
   • Gray
   • Light Blue
2. Quote Field (Lorem ipsum... below)
3. Byline Field (Byline in the first three examples below)
4. Signature Image: Add New/Existing Media (the image in the examples below; it overrides text in the Byline Field)

Section Header

This brick seems to be the only way to add an H1 heading to a page. For SEO purposes, each page should have no more than one.

Selectable Panels

Each option in the dropdown menu is like a sub-page, built from a limited selection of bricks, but some of these may not work.

Tiles

Vertical tiles in rows of up to three. URL required. Take care to use images that are dark enough to make the white text legible, with no important image elements in the area covered by the text.

While the component does not require the copy below the dash, leaving it blank would render the dash off-brand.

Technology At Tyson Videos Explainer 

Emerging Technology Explainer

Explore with us Explainer

Practice Areas Grid Explainer

Video Callout Explainer

Carousel Explainer

Hyperlinks open in a new tab. There should be an option to open in a new tab.

Carousel Explainer (Update)

The carousel now works as intended, with some quirks:

• Use only the Horizontal Hero theme - not Horizontal Slide (default).
• Images should be
  • approximately 1300x500,
  • dark (the carousel darkens the image, but not enough for bright images; the other overlay options do not work),
  • simple (since busy images make the text very hard to read), and
  • completely free of text (even incidental text).
• Image subjects should be
  • grouped left or right (or both, if text is centered), and
  • away from the horizontal centerline (the patty part of the hamburger).
    • This is because the header is not restricted to left/right like the copy, and it's more or less centered vertically; so, long headers will cover the middle of the image, all the way across. Best just to use short headers.
• CTA theme options mostly work, but...
  • the whole slide is linked, so the CTA Button isn't actually necessary--but it's still required by the component, and using a space instead of Link Text will create an ugly little empty button;
  • you can get around this by using the Video Play CTA theme with a space instead of Link Text (the link doesn't have to be a video).
• Theme (large/full bleed) doesn't seem to do anything.
• Neither do the overlay options, which means the darkening effect cannot be turned off. Images with text built-in (such as we've used in Copy bricks) will look wrong, even without the component adding text on top of them.

Locations Map

This component displays a map of Locations. On this site, "Location" is a category of content which can be added; each location on the map corresponds to an individual piece of content. Locations are added through the Drupal main menu, not this brick.

The only option for this brick is the Heading field ("Heading" in the example between the horizontal rules below).

News Feature 

This brick is used on the front page. Like the Blog Carousel, it only links to existing pages on TysonFoods.com—but it links to press releases instead of blog posts. Also like the Blog Carousel, it seems to provide an option to build a press release entirely within the carousel brick itself, but I have not tested this feature. It is unneeded and unnecessarily complicated.

Again, this component could be more useful if less specific. It would be better as just a neat way to display whatever links the page author wanted to present.

Alternatively, if it is to remain specific to news releases, then could it not be automated to fetch the latest releases, as the Press Release Gallery brick does? As it is, someone must manually update this brick on the front page every time a new press release is published.

Note: the pages linked in the example below were selected at random.

Brand Carousel 

This is a specialty component which apparently only works when you create a certain number of sub-bricks. Must have something on the link field.

Next/Previous Block

The Next/Previous Block displays two links, labeled "Previous" and "Next," at the left and right margins of a blue-background block. There are no display options; the only fields available are the two URLs. It can only look like the example below (between the horizontal rules, which are Copy bricks).

Press Release Gallery

This is the specialty brick used on the News Releases page. It has no options, and will always look like the example below (between the long horizontal rules--but note that the gallery itself uses slightly shorter horizontal rules to separate entries).

Removed to keep this page from showing up in every site search.

Video Gallery 

This is a specialty brick that displays videos. It will always look like the example below (between the horizontal rules).

Removed to keep this page from showing up in every site search.

Sustainability Hero Explainer

Do not use. Will break page.