Featured Links and Boxes

Feature links and boxes can be used to show and link to main topics for your sites.

Feature Links

Feature Link Shortcode:

Code

[featurelink icon="globe" img="https://sitesmedia.s3.amazonaws.com/modlang/files/2017/10/modlang-majors-cropped.jpg" text="" btntext="Majors & Minors" color="gold" url="https://sites.allegheny.edu/modlang/majors-minors/"]

[featurelink icon="child" img="https://sitesmedia.s3.amazonaws.com/modlang/files/2017/10/modlang-scholarships-alt.jpg" text="" btntext="What can I do with a Language Degree?" url="https://sites.allegheny.edu/modlang/after-graduation/" color="gold"]

[featurelink icon="user-circle" img="https://sitesmedia.s3.amazonaws.com/modlang/files/2017/10/derek-reno-16.jpg" text="" btntext="Student & Alumni Stories" url="https://sites.allegheny.edu/modlang/student-alumni-stories/" color="gold" last="y"]

Attributes

  • Icon: This attribute allows for an icon to be displayed when a user hovers over the box/image for the feature link.
  • Img: This allows for an image to be added to the link. Images have to be square. They should be between 300×300 to 600×600 pixels in size.
  • Text: This text is displayed underneath the image.
  • Btntext: This is text that is added to the button beneath the picture for the feature link.
  • Color: This specifies the color of the button. The colors should follow Allegheny College’s standards.
  • Url: This URL is the link that the user will be redirected to when they click on the image or button.
  • Featured links always come in groups of three, and the last one needs the special attribute: last =”y”

Feature Link Example:


Feature Box

Feature Box Shortcode:

Code

[feature-box title="Visit Campus" color="blue" img="https://sitesmedia.s3.amazonaws.com/admissions/files/2016/02/visit-campus.jpg" alt="" url="https://sites.allegheny.edu/admissions/visit-allegheny-college/"]

Find out information about visiting our beautiful campus.

[/feature-box]

[feature-box title="Apply" color="pink" img="https://sitesmedia.s3.amazonaws.com/admissions/files/2016/01/hero-innovative-girl-whiteboard.jpg" alt="" url="https://sites.allegheny.edu/admissions/apply/"]

Learn about the application process and criteria, or just learn more about Allegheny College.

[/feature-box]

Attributes

  • Title: This attribute adds the main title to the box.
  • Color: This specifies the color of the box. The colors include pink, blue, orange, and green.
  • Img: This allows for an image to be added to the link.
  • Url: This URL is the link that the user will be redirected to when they click on the image or button.
  • Additional text can be added to the box by writing a paragraph in between [feature-box] and [/feature-box]
  • Feature Boxes generally come in groups of two, using columns

Feature Box Example: