Skip to main content

Grid Page

Overview​

A page with a list of card items in a grid layout. Each card is a link to a new page where either detail or create view can be displayed.

Authentication

Manage your auth settings and configure single sign-on.

GitHub

OAuth
Enabled

GitLab

OAuth
Enabled

Google

OAuth
Enabled

Generic OAuth

OAuth
Not enabled

Grafana

OAuth
Enabled

Azure AD

OAuth
Not enabled

Okta

OAuth
Not enabled

Source code​

import React from 'react';
import { Card, Badge, Icon, Grid } from '@grafana/ui';
import { Data } from '@site/src/components/templates/GridPage/types';

interface CardListPageProps {
  data: Data;
}

export const GridPage = ({ data }: CardListPageProps) => {
  return (
    <Grid gap={3} minColumnWidth={34}>
      {data.map(({ displayName, name, enabled, icon }) => (
        <Card href={'#'} key={name}>
          <Card.Heading>{displayName}</Card.Heading>
          <Card.Meta>OAuth</Card.Meta>
          <Card.Figure>
            <Icon name={icon} size={'xxxl'} />
          </Card.Figure>
          <Card.Actions>
            <Badge text={enabled ? 'Enabled' : 'Not enabled'} color={enabled ? 'green' : 'blue'} />
          </Card.Actions>
        </Card>
      ))}
    </Grid>
  );
};

export default GridPage;

Usage​

  • Use a combination of Grid and Card components to create a grid layout of cards.
  • Use the Card component to create a grid item.
  • To make the layout responsive, use the Grid component with the minColumnWidth prop.
  • For a fixed number of columns, use the Grid component with the columns prop.

Visual guidelines​

Figma designs​