This PR introduces the colSize prop for <IndexCard> which gives the opportunity to set custom col layouts with the index card component. colSize is a fraction based on Assembly grid classes. The component consumes the fraction (for example 1/3) and will set the width of the indexCard on medium to xl screens to 1/3. Medium screen sizes (colsMed) get a fraction with the denominator - 1. If no colSize is set, layout of IndexCards defaults to 1/4.
How to test
Create a component in a consuming site that looks like this..
<IndexCard
key={3}
colSize={'1/3'}
title={'Ticket Portal'}
text={'Support Plan subscribers can submit and view their technical support tickets here.'}
links={[
{ title: 'See your open tickets', link: 'https://support.mapbox.com/hc/en-us' }
]}
sectionColor={'blue'}
/>
The <div> for that indexCard should have a class of col w-full w-1/2-mm w-1/2-ml w-1/3-mxl mb18
Before merge
[ ] Add entry to CHANGELOG.md to describe changes.
This PR introduces the
colSize
prop for<IndexCard>
which gives the opportunity to set custom col layouts with the index card component.colSize
is a fraction based on Assembly grid classes. The component consumes the fraction (for example1/3
) and will set the width of the indexCard on medium to xl screens to 1/3. Medium screen sizes (colsMed
) get a fraction with the denominator - 1. If nocolSize
is set, layout of IndexCards defaults to 1/4.How to test
Create a component in a consuming site that looks like this..
The
<div>
for that indexCard should have a class ofcol w-full w-1/2-mm w-1/2-ml w-1/3-mxl mb18
Before merge