# Ctoneedtoknow Podcast Overview Page

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <main role="main" class="ctoneedtoknow-podcast-overview-page">
        <header class="topic-header bg-image-podcast-02">
            <div class="topic-header__body">
                <div>
                    <h1 class="topic-header__title topic-header__title--ultra bg-image-podcast-02">#CTO<br>NEED<br>TO<br>KNOW</h1>
                </div>
                <div class="topic-header__text">
                    Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                    ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                    prosciutto buffalo drumstick strip steak capicola short loin.
                    Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                    chuck doner. Pig venison pork chop shoulder corned beef capicola
                    meatball.
                </div>
                <ul class="toolbar">
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-feedback icon--brand-gray"></span>
                            Feedback
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-apple-itunes icon--brand-gray"></span>
                            Apple
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-spotify icon--brand-gray"></span>
                            Spotify
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-rss icon--brand-gray"></span>
                            RSS
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-text icon--brand-gray"></span>
                            Transkript
                        </a>
                    </li>
                </ul>
                <span class="icon icon-arrow-long-down icon--brand-gray"></span>
            </div>
        </header>

        <article class="teaser-page-layout">
            <div class="podcast-grid">
                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-1">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-2">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-3">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-4">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-1">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>
            </div>
        </article>
    </main>

`
`

    <main role="main" class="ctoneedtoknow-podcast-overview-page">
        <header class="topic-header bg-image-podcast-02">
            <div class="topic-header__body">
                <div>
                    <h1 class="topic-header__title topic-header__title--ultra bg-image-podcast-02">#CTO<br>NEED<br>TO<br>KNOW</h1>
                </div>
                <div class="topic-header__text">
                    Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                    ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                    prosciutto buffalo drumstick strip steak capicola short loin.
                    Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                    chuck doner. Pig venison pork chop shoulder corned beef capicola
                    meatball.
                </div>
                <ul class="toolbar">
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-feedback icon--brand-gray"></span>
                            Feedback
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-apple-itunes icon--brand-gray"></span>
                            Apple
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-spotify icon--brand-gray"></span>
                            Spotify
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-rss icon--brand-gray"></span>
                            RSS
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-text icon--brand-gray"></span>
                            Transkript
                        </a>
                    </li>
                </ul>
                <span class="icon icon-arrow-long-down icon--brand-gray"></span>
            </div>
        </header>

        <article class="teaser-page-layout">
            <div class="podcast-grid">
                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-1">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-2">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-3">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-4">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-1">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>
            </div>
        </article>
    </main>

`
`

    {
      "code": "pick(:love) do |something|\n    n.times do\n        result = play(something)\n        result.publish\n    end\nend\n"
    }

`
File:

- Content:
  `

      .ctoneedtoknow-podcast-overview-page {
        ::selection {
          background: $brand-gray-20;
        }

        .topic-header {
          margin-bottom: $spacer-lg;
        }

        .topic-header__body {
          color: $brand-gray;
          background-color: $brand-white;
        }

        .toolbar__link {
          padding: $spacer-xs;
          color: $brand-gray;
          transition: standard-transition(background-color);

          &:hover,
          &:focus {
            color: $brand-white;
            background-color: $brand-gray;

            .icon {
              background: $brand-white;
            }
          }
        }
      }

  `
- URL: /components/raw/ctoneedtoknow-podcast-overview-page/_ctoneedtoknow-podcast-overview-page.scss
- Filesystem Path: components/01-pages/podcast-pages/ctoneedtoknow-podcast/ctoneedtoknow-podcast-overview-page/_ctoneedtoknow-podcast-overview-page.scss
- Size: 519 Bytes

- Handle: @ctoneedtoknow-podcast-overview-page
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/01-pages/podcast-pages/ctoneedtoknow-podcast/ctoneedtoknow-podcast-overview-page/ctoneedtoknow-podcast-overview-page.html

No notes defined.