UTM CSSC

Grid Components

The grid components are used throughout our pages to create flexible and reusable layouts.

How to use:

Users can use the grid component by simply calling:

  • <grid-1-x-2> </grid-1-x-2>
  • <grid-1-x-3> </grid-1-x-3>
  • <grid-2-x-3> </grid-2-x-3>

These elements are just like any other default HTML elements such as <h1>. The user can adjust the element by passing in specific prop values

Grid 1 x 2

Props:

NameTypeDescriptionDefault
titleStringTitle of the component''
descStringComponent's Description''
buttonStringButton Description''
linkStringButton link''
img-srcStringImage link''
reversedBooleanReverse the orientation of the componentfalse

Example:

<grid-1-x-2
    title="Component title"
    img-src="Link to image"
    link="Link to redirect users to"
    desc="Component description"
    button="Button Description"
    :reversed="true">
</grid-1-x-2>

Grid 1 x 3 / Grid 2 x 3

Props:

NameTypeDescriptionDefault
ChildrenArrayArray of objects containing title, desc and icon[]

Objects in Children:

NameTypeDescriptionDefault
titleStringTitle of the component''
descStringComponent's Description''
iconStringLink to the icon''