Academy of Natural Sciences

Featured Callout 

<div class="featured-callout js-watch u-watch--fade-up" data-bkg-theme="base">

    <div class="o-h-card  o-h-card--label" data-bkg-theme="">
        <div class="o-container o-h-card__wrapper">
            <div class="o-row o-h-card__row">
                <div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
                    <div class="o-h-card__image">
                        <img src="/images/collections/shells.jpg" alt="" />
                    </div>
                </div>
                <div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
                    <div class="o-h-card__content">

                        <p class="o-h-card__content-label f-text--tag f-upper f-spaced">FEATURED PROJECT`</p>

                        <div class="o-h-card__main-text">

                            <a href="" class="o-h-card__link">
                                <h4 class="o-h-card__title f-title--h4 ">
                                    <span class="u-hover-drawline">Amazing shells of the Academy</span>
                                </h4>
                                <p class="o-h-card__desc f-text--small">The Academy’s shell collection dates back to 1812. Including more than 10 million shells, it represents every region of the world.</p>
                        </div>
                        <div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
                            Learn More
                            <span class="o-h-card__cta-icon o-btn__icon">
                                <svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
                                    <path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
                                </svg>

                            </span>
                        </div>
                        </a>

                        <a class="o-h-card__secondary-link o-btn o-btn--primary" href=#>
                            explore all projects
                        </a>

                    </div>
                </div>
            </div>
        </div>

    </div>
 
<div class="featured-callout js-watch u-watch--fade-up" data-bkg-theme="base">
	{% include "04-objects/horizontal-card" with {
    hTag: 'h4',
    title: 'Amazing shells of the Academy',
    link: '#',
    label: 'FEATURED PROJECT`',
    description:
      'The Academy’s shell collection dates back to 1812. Including more than 10 million shells, it represents every region of the world.',
    image: '<img src="/images/collections/shells.jpg" alt="" />',
    linkCTAText: 'Learn More',
    buttonCTAText: 'explore all projects',
    buttonCTALink: '#',
  } %}
</div>
 
{
  "pageColorTheme": "teal",
  "hTag": "h2",
  "title": "Amazing shells of the Academy",
  "link": "#",
  "label": "FEATURED PROJECT`",
  "description": "The Academy’s shell collection dates back to 1812. Including more than 10 million shells, it represents every region of the world.",
  "image": "<img src=\"/images/collections/shells.jpg\" alt=\"\" />",
  "linkCTAText": "Learn More",
  "buttonCTAText": "explore all projects",
  "buttonCTALink": "#"
}

No notes defined.