FooterListContainer

FooterListContainer is a sub-component of the Footer organism.

It is used to position and layout content within the Footer’s grid system. Each container corresponds to a specific column area in the footer layout.

Basic Usage

import { Footer, FooterListContainer, FooterList } from '@krakentech/coral-organisms';
import { Button, Typography } from '@krakentech/coral';
 
const menuItems = [
    { text: "Help & FAQs", href: "/faqs" },
    { text: "Contact us", href: "/contact" },
];
 
<Footer>
    <FooterListContainer variant="column1">
        <FooterList>
            {menuItems.map((item, i) => (
                <Button
                    color="base100"
                    variant="text"
                    href={item.href}
                    key={`${item.text}-${i}`}
                >
                    <Typography component="span" textStyle="h6" textAlign="left">
                        {item.text}
                    </Typography>
                </Button>
            ))}
        </FooterList>
    </FooterListContainer>
</Footer>

Properties

variant

The variant prop controls which column area the container occupies in the Footer’s grid layout. There are four available variants:

• column1 - First column (left-most on desktop)
• column2 - Second column
• column3 - Third column
• column4 - Fourth column (right-most on desktop, with special right-aligned styling)

<FooterListContainer variant="column2">
    {/* Content will appear in the second column */}
</FooterListContainer>

Responsive Grid Behavior

On mobile (base breakpoint), all columns stack vertically and span full width. On medium screens and up, the columns display in a four-column horizontal layout.

The Footer’s grid structure ensures that column4 will always appear on the right side, even if column2 and column3 are empty, because the grid template defines all four column positions.

Special Styling for column4

The column4 variant includes additional styling that makes it ideal for right-aligned content like social media links or country selectors:

• Uses flexbox layout with vertical stacking
• Adds medium spacing between child elements
• Right-aligns content on medium screens and up

<FooterListContainer variant="column4">
    <FooterSocialList>
        {/* Social links will be right-aligned on desktop */}
    </FooterSocialList>
    <FooterCountryList currentCountry="GB" omit />
</FooterListContainer>

Responsive Variants

The variant prop accepts responsive values, allowing different column placements at different breakpoints:

<FooterListContainer variant={{ base: 'column1', md: 'column2' }}>
    {/* Will be in column1 on mobile, column2 on desktop */}
</FooterListContainer>

Full API