Hi, I would like to share some new Adapt components.
You can view them in action here.
All components are available on my github profile.
Thanks to all the adaptlearning community for their support.
New components
Re: New components
Hi Ignacio,
We really love these new plug-ins and have recently installed the Cards, Vertical Items, Counters, and Link Items.
We really like the 7th option (horizontal card with a picture on the far left or right) you have done with the cards and would like to know how you set this up. We also aren't sure how to get 3 cards side by side.
Any help you can provide would be greatly appreciated.
Currently we’re on:
- Authoring tool version 0.10.5
- Framework version 5.18.1
Thanks!
Sherri
Re: New components
Hi Sherri, thank you I appreciate it.
By default, all these components have minimal css styling.
I prefer to modify the appearance from the theme.
The 7th option has 'list' class on the cards component.
You can add this to your custom theme or on your Authoring Tool from project settings >Custom CSS/LESS code .cards{
&.list{
.cards__item-container{
flex-direction: row;
align-items: center;
}
.cards__item-body{
margin-right: 2rem;
}
.cards__item__image{
min-width: 180px;
padding: .5rem;
}
.cards__item.row-reverse{
.cards__item-container{
flex-direction: row-reverse;
}
.cards__item-body{
margin-right: 0;
margin-left: 2rem;
}
}
@media (max-width: @device-width-small) {
.cards__item-container,.cards__item.row-reverse .cards__item-container{
flex-direction: column;
}
.cards__item-body{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
}
}
And then in the classes of one of the items add: row-reverse
To get 3 cards side by side you can use the property Columns.
I hope this helps!
