Icon box
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Default
Use @Html.LLG().IconBox() method to create a IconBox.
Default Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae rutrum lacus porttitor.
Center Align
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae rutrum lacus porttitor.
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Default Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod..."))
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Center Align")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Align(IconBoxAlign.Center))
Icon Position
Use .IconPosition(IconBoxIconPosition iconPosition) method to set icon position. There are three type of icon position Left,
Center and Right. Default icon positon is IconBoxIconPosition.Left
You can see on default exemple.
Left Icon Position
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Right Icon Position
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.IconPosition(IconBoxIconPosition.Left)
.Title("Left Icon Position")
.Content("Sed quis dolor in lacuses ullam corper euis mod..."))
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.IconPosition(IconBoxIconPosition.Right)
.Align(IconBoxAlign.Right) // All content align
.Title("Right Icon Position")
.Content("Sed quis dolor in lacuses ullam corper euis mod..."))
Bordered
Use .Bordered()(+2 overloads) method to use border.
Other methods are Bordered(BootstrapColor bgColor) and
Bordered(BootstrapColor bgColor, OvalDividerType ovalDividerType)
Bordered Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Bordered Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Left Icon Position")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered())
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Right Icon Position")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered()
.Align(IconBoxAlign.Right))
Changing Bg Color
Use .Bordered(BootstrapColor.Primary) If you look at the second demo, you will see color problem. You can change color of icon, title and content
by using .TitleColor(BootstrapColor titleColor), .ContentColor(BootstrapColor contentColor), .IconColor(BootstrapColor iconColor)
Light Bg Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Success Bg Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Light Bg Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered(bgColor:BootstrapColor.Light))
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Success Bg Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered(bgColor:BootstrapColor.Success)
.Align(IconBoxAlign.Center))
Changing Title, Content and Icon color
Use .TitleColor(BootstrapColor titleColor) to change title color,
Use .ContentColor(BootstrapColor contentColor) to change content color,
Use .IconColor(BootstrapColor iconColor) to change icon color.
Light Bg Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Success Bg Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Light Bg Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered(bgColor:BootstrapColor.Primary)
.TitleColor(BootstrapColor.White)
.ContentColor(BootstrapColor.White)
.IconColor(BootstrapColor.White))
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Success Bg Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered(bgColor:BootstrapColor.Success)
.TitleColor(BootstrapColor.White)
.ContentColor(BootstrapColor.White)
.IconColor(BootstrapColor.White)
.Align(IconBoxAlign.Center))
Add OvalDivider to Iconbox
Use .Bordered(BootstrapColor bgColor, OvalDividerType ovalDividerType) method to add divider to icon box.
Light Bg Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Success Bg Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Light Bg Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered(BootstrapColor.Danger, OvalDividerType.Divider1)
.TitleColor(BootstrapColor.White)
.ContentColor(BootstrapColor.White)
.IconColor(BootstrapColor.White))
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Success Bg Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod...")
.Bordered(BootstrapColor.Secondary, OvalDividerType.Divider10)
.TitleColor(BootstrapColor.White)
.ContentColor(BootstrapColor.White)
.IconColor(BootstrapColor.White)
.Align(IconBoxAlign.Center))
Action Link
Use .ActionLink(string linkText, string actionName, string controllerName) method to create a action link.
Action Link Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Explore nowAction Link Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Explore now@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Action Link Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod necet nibh..")
.ActionLink("Explore now", "Index", "Home"))
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Action Link Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod necet nibh..")
.Bordered()
.Align(IconBoxAlign.Center)
.TransitionHover().HoverShadow()
.IconColor(BootstrapColor.Success)
.ActionLink("Explore now", "Index2", "Home"))
Others
Use .TransitionHover() method to create a IconBox.
Bordered Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
Bordered Iconbox
Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Title("Bordered Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.")
.Bordered().TransitionHover())
@(Html.LLG().IconBox()
.Icon("fas fa-layer-group")
.Bordered()
.Align(IconBoxAlign.Center)
.Title("Bordered Iconbox")
.Content("Sed quis dolor in lacuses ullam corper euis mod necet nibh. Morbi mollis, enim vitae.")
.TransitionHover().HoverShadow())